laceew45 Posted July 23, 2014 Share Posted July 23, 2014 My project has to look like a newspaper that is online. So I am doing two sidebars with small stories on the side of the main feature story. The header has the newspaper name and the date that has to be used. But um my code looked good but if you open it in a browser..it is severely messed up. Can anyone help me? I need this asap. The Project is due the 30th but I have other stuff to ad to it. MY GOAL: 1. I am trying to put the picture in between the two side stories and the article that goes with the picture, below the picture. 2. I am trying to put a border around each story/part and a main border around the whole thing. 3. Under the feature/main story, I want to add another small story below it in it's own border as well. 4. Under the side stories, I want to add another small story each with their own border 5. The color that is present, I want to be the main background color. idk how to tag certain people that I know could help but I know @Mouseykins might could help me. Here is my code: <!DOCTYPE html> <html> <meta charset="utf-8" /> <style type="text/css"> .container { position:relative; padding:0 0 0 55px; margin: 0px 0px -10px 0px; padding:0px; background-color:#EEEADC; } #sidebar { position:absolute; top:100px; bottom:0; left:130px; width:200px; } #header { border:1px solid #000; width:100px; height:20px; margin:0 0 5px 0; width: 1000px; margin: 0px auto -180px auto; padding: 0px; text-align: center; } #content { border:1px solid #000; width:100px; height:50px; margin-top: 120px; margin-bottom: 120px; margin-left: 110px; margin-right: 100px; } #footer { border:1px solid #000; width:100px; height:20px; margin:5px 0 0 0; } #side { position:absolute; top:110px; bottom:0; right:130px; width:200px; } #image { float: top; margin-top: 135px; margin-bottom: 0.5em; margin-right: 0.5em; margin-left: 0px; border-top: 0.2em; border-right: 0.2em; border-bottom: 0.2em; border-left: 0.2em; padding: 0.2em; } </style> <div class="container"> <div id="sidebar"> <h3>City Fest to feature music for $5</h3> <p>During a typical week, the former CityFest lot sits almost empty, save for a few cars taking advantage of the free parking. On weekend nights, it can suffer a bit of spillover from college students and others visiting downtown bars. But Saturday, the lot began looking a bit like its old self as it filled with music, art and smiling people for the Druid City Arts Festival.</p> <p>This was the first year for the festival, hosted by the University of Alabama’s Creative Campus initiative. The festival’s goal was to embrace diversity within the community by introducing people to the wealth of artists that Tuscaloosa and the region has to offer. Bryan and Donna Hubbard attended the festival, excited to see an event similar to the now-defunct CityFest rock its old stomping grounds.</p> <p>“We miss the CityFest a lot, and we didn’t miss a year of that,” Bryan Hubbard said. “We don’t have it anymore, and we’re always up for something like this. We need more things like this here.” With the Hubbards watching, the band Sparrow and The Ghost played for about 45 minutes. The band’s smooth, steady sound withstood a few gusts of wind that knocked over drummer Reed Watson’s cymbals at one point in the set. Watson and guitarist Stuart Bond said events like the Druid City Arts Festival provide more than just something to do on a sunny day.</p> <p>“Things like this are possible economic booms for this community,” Watson said. “There is music in this town that is very, very good, and not just in comparison to Birmingham or Montgomery or Mobile. We have stuff here that is worth looking at.” Watson owns Hackberry Records, a local music label Sparrow and The Ghost are signed with. Bond said the artists associated with Hackberry Records represent just a few of the great bands the city has to offer. <p>“These events are important because we have such potential to make this city just blow up with tons of great music,” Bond said.</p> Along with Sparrow and the Ghost, 20 other bands participated in the festival. Six bands played, one after the other, on the main stage in the former CityFest lot. <p>An “after party,” beginning at 9 p.m. in five downtown bars, featured the festival’s other 15 bands. For $5, festivalgoers purchased armbands that gained them access to Little Willie’s, The Booth, Egan’s, Innisfree and Brown’s Corner, which each hosted three bands. But music wasn’t the only art form on display during the festival, with 16 visual artists displaying their work during the day at the former CityFest lot.</p> UA students Rachael Davis and cousins Randa and Courtney Morrison sold a variety of wine and liquor bottles that they had painted and illuminated with Christmas tree lights.</p> <p>The students, participating in their first arts festival, wouldn’t reveal their method of painting the bottles, but the self-taught artists said they got the idea for the bottles after seeing a similar product for sale at a thrift store. <p>“We just started doing these a few months ago, and up until now we’ve been just giving them away. So today is the first day we’re trying for a profit,” Davis said.</p> The group said they decided to try their luck at the Druid City Arts Festival since there was no entrance fee for student artists.</p> <p>“We had nothing to lose,” Courtney Morrison said.</p> </div> <div id="header"> <h1>TuscaloosaNews.com</h1> <h2 class=container>Sunday, March 25, 2012</h2> </div> <div id="middle"> <h3>UA student found dead in Black Warrior River</h3> <img src="//images.weserv.nl/?url=http://i948.photobucket.com/albums/ad321/htmlgirlcoder/Group%20Project/407_Drowning1_zpsfc1fe720.jpg" width="420" height="265" id="image" alt="UA student drowns" title="UA Student drowns" style="position: absolute; top: 10px; left: 10px;> <p id="content"> By daybreak Friday, it was clear that divers searching for Tre’ Jones in the Black Warrior River were on a recovery — not a rescue — mission. The University of Alabama student had apparently fallen from the Bama Belle riverboat during a sorority party late Thursday night. Efforts to locate him into the early morning hours Friday were unsuccessful, leading to a full-scale search of the river bottom as soon as the sun rose. About a hundred friends and family members waited on the riverbank while divers meticulously conducted grid searches at 30 to 40 foot depths until 1:55 p.m. That was when divers pulled the 20-year-old from a spot near where he fell from the boat, just west of the train trestle crossing the river by the Tuscaloosa Amphitheater. EMS Chief Travis Parker of the Tuscaloosa Fire and Rescue Service said divers used a grid search technique in which teams use their hands underwater to feel along 12 square feet at a time. “It’s very, very time-consuming,” Parker said. Officials said the depth and water conditions rendered visibility to almost zero, making the search difficult. The hunt for Jones, a Demopolis native whose full name is Charles Edward Jones III, began Thursday at about 9:50 p.m. after he apparently fell from the Bama Belle cruise boat and into the water just west of the amphitheater during a formal party held by the Delta Sigma Theta sorority. Investigators have interviewed witnesses and say that foul play is not suspected, but declined to say what they have learned about the circumstances surrounding the accident. Counselors and University of Alabama officials were at the boat dock early Friday morning as party-goers disembarked, many of them visibly distraught. Jones, a member of the Kappa Alpha Psi fraternity, posted two photos to his Twitter account hours before he died. Both photos were taken around dusk, and show him posing alone and with a sorority member, dressed in white for the theme of the formal party. City and county officials used boats and helicopters to look for the civil engineering student, but called off the search just before 1 a.m. “Until first light, there’s nothing else we can do,” Tuscaloosa Police Department spokesman Sgt. Brent Blankley said at the time. Dive teams were assembled by 6 a.m. Friday and in the water an hour later, Parker said. Two boats from the Tuscaloosa Fire and Rescue Service and boats from the Tuscaloosa Police Department, Tuscaloosa County Sheriff’s Office, Alabama Marine Police and U.S. Coast Guard were involved with the search, along with helicopters from the Police Department and Sheriff’s Office. Parker said rescuers narrowed down the location where the young man fell, and based on information gathered from Bama Belle crew members and other students on the boat, search teams began using -SONAR, thermal imaging equipment and other devices near the railroad trestle. The divers didn’t go in Thursday night because of safety concerns, Parker said. “There’s so much debris in this river, from fishing lines to wires to whatever people throw in the water,” Parker said. “You put guys in the water at night, and they go under and they get tangled up in something, then all of a sudden you have two victims.” Before coming to Alabama, Jones, a cousin of Tuscaloosa Police Chief Steve Anderson, played defensive end and outside linebacker on the Demopolis High School football team. He graduated in 2010. His former coach, Tom Causey, remained with the family at the Black Warrior River during the search, and described Jones as an “unbelievable teammate.” “Tre’ was ... just a great kid,” Causey said. “(He) would do anything we asked him to do. Unselfish. He was unbelievably hard-working. Very intelligent, very smart. Class act all the way. He always put his team first.” Causey said he and the family have heard conflicting reports indicating that Jones jumped or fell from the Bama Belle. Causey said Jones was a young man who questioned why life dealt an unfair hand to those who believed they were doing things right. “The greatest memory I have of Tre’ was in the playoffs, the quarterfinals, in (2008),” he said, “and after we got beat, he asked me why it had to happen that way ... after we had worked hard all season and did things right, the way they were supposed to be done. “I looked at him and I said, ‘Son, this will come back to you somewhere in your life. Whether it’s when you’re a father, whether it’s when you’re 25 or 30, someday life will repay you if you keep doing things the right way.’ It turns out we won the state championship the next year. He liked that.”</p> <p>Staff Writer Aaron Suttles contributed to this report.</p> </div> <div id="footer"> </div> <div id="side"> <h3>Education Bill to help out college students</h3> <i>The Associated Press</i> <p>WASHINGTON | Big changes in the student loan program will help make college more affordable for students and their debt load more manageable after graduation, President Barack Obama says. After a week when the loan program overhaul passed in the shadow of the health-care law, the president cited expected benefits for young people: more student lending, caps on those repayments and more money for minority colleges and universities. Obama is expected to sign the education bill into law Tuesday.</p> <p>“This reform of the federal student loan programs will save taxpayers $68 billion over the next decade,” Obama said in his weekly Internet and radio address Saturday. “And with this legislation, we’re putting that money to use achieving a goal I set for America: By the end of this decade, we will once again have the highest proportion of college graduates in the world.” Democrats in the House succeeded in linking the education bill with the health-care overhaul over stiff Republican objections, giving Obama a series of accomplishments — including an agreement with Russia on nuclear weapons— after a rough and divisive several months.</p> <p>“To make sure our students don’t go broke just because they chose to go to college, we’re making it easier for graduates to afford their student loan payments,” Obama said.</p> <p>“The average student ends up with more than $23,000 in debt. So when this change takes effect in 2014, we’ll cap a graduate’s annual student loan repayments at 10 percent of his or her income.”</p> <p>Under the measure, private banks would no longer get fees for acting as middlemen in federal student loans. The government would use the savings to boost Pell Grants and make it easier for some workers to repay their student loans. In addition, some borrowers could see lower interest rates and higher approval rates on student loans. Savings are also meant to go toward reducing the deficit and helping to pay for expanded health care. Obama is hoping the health and education initiatives will pay dividends for Democrats in the November congressional elections and improve his own prospects in a presumed 2012 re-election bid. One wrinkle, though, is that most pieces of this week’s legislation don’t kick in until 2014 — well after the midterm elections and the next presidential election. Obama said the achievements show “what’s possible when we can come together to overcome the politics of the moment, push back on the special interests and look beyond the next election to do what’s right for the next generation.”</p> </div> </div> </html> Quote Link to comment Share on other sites More sharing options...
Nimphal Posted July 23, 2014 Share Posted July 23, 2014 I'm looking at it right now, I don't yet have solutions, but do you know how to use Browser Developer Console? In Chrome it's Ctrl+Shift+I. Then you click the little magnifying glass at the very left of the box and inspect each element. On the right you can see all the CSS that applies to it. Also, here .container { position:relative; padding:0 0 0 55px; margin: 0px 0px -10px 0px; padding:0px; background-color:#EEEADC;} you set the padding twice. Why? EDIT: The div with id #middle seems to be taking over the whole page, because you have no CSS for it. Have you tried styling it a bit so that it doesn't take over? Maybe the CSS for #content is what you meant to put there? If you rename the #middle to #content, the applicable CSS is called and the page looks a bit better. Like, the right sidebar is absolutely perfect :D EDIT2: You need to fiddle with your margins and box sizes. For content, this: #content { border:1px solid #000; width:500px; height:50px; margin-top: 320px; margin-bottom: 120px; margin-left: 410px; margin-right: 100px; } looks alright to me. The way you had it now, the #content container was just 50px tall and 100px wide, not nearly enough to fit all the text. You could also add additional styles to the heading elements (h1, h2, h3). I think for it to look right all you need is fiddling with margins and sizes. Quote Link to comment Share on other sites More sharing options...
wolfponies Posted July 23, 2014 Share Posted July 23, 2014 There's a couple of things here. I'll go through your list first. 1. The picture will never appear within the middle div because you use absolute position for the image itself. 2. Borders work fine for me. Try adding border:3px solid black; to one of your divs. And the rest will be covered now. For your project, I'd never position anything absolutely. It's a big nono and should be avoided as often as possible! Your divs depend on the amount of text you have in them. It doesn't matter that you tell a div to have a height of 100px and then add a super long story, the div will extend its height to match the amount of text. Instead you should use overflow: auto; or any other fancy overflow attribute to make sure the div never resize. Once you've sorted out that, I suggest you start off by placing the divs making a nice layout BEFORE adding images, text etc. Color the divs differently to be able to identify them. That's what I've got at the moment. Do as suggested. With better code quality overall it's easier for us to help you with the details. Right now, we cannot identify them. Quote Link to comment Share on other sites More sharing options...
laceew45 Posted July 23, 2014 Author Share Posted July 23, 2014 Okay thank y'all! I will do what you both said when I get to tonight and I will see what it does and if I still need you, I will repost. --It has bee over 2 months since I have coded and so I kinda forgot, well a lot.. ha Thanks for being patient with me though! Quote Link to comment Share on other sites More sharing options...
Mouseykins Posted July 24, 2014 Share Posted July 24, 2014 Does your project need to be an actual functioning website? A few months ago for my math course I had to do a final project presentation. From the format choices I was given I decided on a website. I wanted to show of my coding skills but had very little time to do it. I decided to use my Office Mac Word in publishing view to create my site. On my navigation bar, I went in order of how my pages would be and if the content ran more then a page I inserted a next page button image. If something like that would be better for your project then you can probably use Microsoft publisher or the google doc equivalent. If it needs to be coded I can help with the tweaking. :) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.