One of my website pages is current messed up. I'm having a hard time getting the biographies in for my crew of lovable misfits. Here is the webpage:
http://www.sampsonvision.com/about/
The code for this webpage can be found in the about folder in the website files inside this zip folder here:
https://drive.google.com/file/d/0B3ZPyNRv7C3hemJERHZYVWFtSDg/edit?usp=sharing
May you please help me fix the divs so that the pictures are all in a nice little column and the text is directly next to the image, telling the user all about that particular crew member? I don't want the elements going all over the place like you see in the sampsonvision.com page above.
Add an empty div to the end of each section with the class "clear".
<div class="jordansbio">
<div class="jordanpic">
<img src="images/jordanwhite.jpg" width="150" height="170">
</div>
<div class="jordaninfo">
<span class="jwhit">
<h2 align="center">Jordan White</h2>
<p>Testing, Testing, 1, 2, 3</p>
</span>
</div>
<div class="clear"></div>
</div>
Then add the following CSS style
.clear {
clear: both;
}
What you're facing is a very common issue encountered with using floats to position content. Basically with all of your elements floated, none of them are considered to have height and so the container itself has a height of 0.
http://www.quirksmode.org/css/clearing.html
Related
So I have a question that might be easy but I could not find anything that works after a lot of searches.
I have this h2 tag which is defined in .aspx. Right below this, I have a div with an id.
<h2>Documents</h2>
<div id="abcdocuments"></div>
I am appending an image before the start of the whole grid which gives me a result like this that there is a heading first. then below I get that image and then below the whole grid
I want the image to be right next to Documents Heading and for some reason, I can't define the img at .aspx It has to be at the class level. Also, I can not move my heading at the class level. Is there any way I can change the styling or something to move the image next to the header?
my html:
<h2>Documents</h2>
<div><img src="../../Images/pincomment.png"
style='width:2%;cursor:pointer;'
/></div>
You can make the heading and the image sit next to each other by making them inline-block.
This snippet is simple because the given HTML is not in its real life context - so the specificity in the CSS does not need added classes, but in the real situation you would of course need to ensure that you had selected the right h2.
h2,
h2+div {
display: inline-block;
}
<h2>Documents</h2>
<div>
<img src="../../Images/pincomment.png" style='width:2%;cursor:pointer;' /></div>
<div class="FDAccordions"></div>
<h2>Lorem ipsum…</h2>
<div style="position:relative;"><img src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" style="width:2%;top:-3em;left:17em;position:absolute;"/></div>
I’m experiencing two issues with a bootstrap layout on a website that I’m building and I’m wondering if someone can point out where I’m going wrong. I have put my site live on a sub domain so that you can see the issue I am facing. It can be found here http://cefn.mywebsitebuild.co.uk//fixtures-results/first-team/
Issue one
The col-xs-12 fix-result div is floating outside the container and im unsure why. I also want this to align with the image see green line on my image
Issue two
The col-xs-12 match-sponsor div is also floating outside the container and I’m unsure why
I have uploaded my page source http://www.bootlint.com/ and its tells me that there are problems with your code.
Can someone please tell me what I can do to get this working?
Thanks
Paul
You may not want to adjust div's for that one image. I would strongly recommend to leave current bootstrap settings. Instead if you want to fill div with that image, add this attribute to parent div of that image.This way image would be aligned with rest of your divs.
style="
padding: 0px 0px;
"
You nest your rows differently. This is the easiest fix:
<!-- This is your very first row -->
<div class="row">
<div class="col-md-12">
<div class="row"> <!-- INSERT ROW HERE -->
<h4 class="heading-mini">First Team Fixtures & Results</h4>
<img src="/media/1014/img_5507.jpg?crop=0,0.24305557250976545,0.0000000000000007579122514774,0.33194442749023489&cropmode=percentage&rnd=131162832050000000" class="img-responsive team-photo" alt="" title="">
<p class="photo-names">Back row (left to right): Paul Griffiths, Nathan Williams, Sam Roberts, Oliver Davies, Jamie Rawlinson</p>
</div> <!-- END ROW HERE -->
</div>
</div>
However, I wouldn't go so far to say that it's the best fix... sorry. (I would opt for removing a nested row/columns everywhere else... )
Issue 2 is the same thing. (Everywhere else you have nested row->col->row->col.)
Hi fixed this by adding the following to the parent row divs
<div class="row" style="margin-left:0px; margin-right:0px;">
The nested bootstrap validates and It now looks as i wanted (hope its correct)
I plan to create a class apply the margin fix and apply the class tto the parent row divs instead of using inline style.
Thanks
I took time to format a div tag for my main content and then I put that div inside a wrapper div. Well, when I went to add my logo to the site, everything shifted. The div that the logo was in seemed to have pushed the wrapper tag down. Being new to code, I'm trying to keep my design as clean as possible but it is falling apart. Any suggestions? Any help? In the fiddle, I started the HTML code where the img source, this was the image that -when added- pushed my content down.
Here is the fiddle
http://jsfiddle.net/569Gm/
<div id="logo">
<img src="images/logo/logo-vector.png" />
</div>
<div id="wrapper">
<div id="aboutus">
<p>We are a Hagerstown-based junk removal and moving service. Able to accomplish jobs both big and small, we accept residential, commerical, and industrial jobs. </p>
<p> </p>
<p>Active since 2014, we are a relatively new service looking to help as many people as possible. Visit our Facebook Page to stay posted on our recent works, job openings, special offers and more. </p>
</div>
<div id="scheduling">
<p>To schedule for a service, please provide the information listed
below and we will respond promptly.</p>
</div>
<div id="contactus">
<p>If you have any questions, comments, or concerns, our contact information is listed below.</p>
<p> </p>
<p>Phone: (443) 690 6421</p>
<p>Email: service#hagdustboy.com</p>
</div>
</div>
</body>
</html>
</div>
This is what my website looks like now that I added the logo.
http://www.pixentral.com/show.php?picture=1PYUTuzOhcbLcaoadEpTNk2qnm
Add float:left; to your #logo, and use clear:left; instead of clear:both;.
By adding float:left; & clear:left; the #wrapper will come inline with your logo.
See the Demo
Float your logo left "float: left;". Clear your logo left as well "clear: left;". As a general rule of thumb, anything in the flow of the page /not "absolutely" positioned will need to be floated in some form way or shape unless the "div" containing it is floated. A good way of remembering this is, anything composition related most likely needs to be floated. Float left, assuming your margins and paddings are "margin: 0" "padding:0" will snap your div to as far right or left as the width parameters allow. Floating is really how you build the flow of the page.
I have two divs, wrapped inside a bigger div. I need to stack them next to each other rather than have them display as blocks that they typically do. I followed suggestions on similar stackoverflow questions and floated the first inner div to the left and floated the 2nd inner div to the right. No success.
I floated both inner div's to left and set overflow:hidden to the wrapper div. No success. I also, set both the inner div display's to an inline-block type. No success. They all stack over each other and this is not what I want.
Here is the semantic markup along with the CSS:
<div align="left" style="border:2px dotted #fff;margin-top:5px;">
<!-- <span class="hyperlink_message">This is the message, redundant</span> -->
<div class="hyperlink preview" style=";padding-top:8px;border:1px solid #bbc5ee;">
<div style="float:left;">
<a href="https://www.facebook.com/parijat" target="_blank">
<img src="https://sphotos-b.xx.fbcdn.net/hphotos-ash4/395790_10150612393596211_887151733_n.jpg" alt="image not found" style="width:100px;height:100px;border:solid 1px gray;margin-right:5px;" ></img>
</a>
</div>
<div style="float:left;">
<div style="font-size:12px;color:black;"><b>My Facebook page</b></div>
<div style="font-size:10px;color:gray;">www.facebook.com</div>
<div style="padding-top:5px;font-size:10px;color:gray;">Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet.</div>
</div>
<div style="clear: both"></div>
</div>
</div>
(please excuse the CSS styles included along with the markup, dabbling with some terrible legacy code at the moment.
And the corresponding JSFiddle.
http://jsfiddle.net/hpTym/
What do you guys think is going wrong here?
Set a width for the floating divs, or do you need them to float without specific width?
I've got some HTML:
<div id="thing">
<div id="contentheader">
<h3>Header</h3>
</div>
<div id="contentcontainer">
<div id="image">
<img alt="balt" src="imagesrc">
</div>
<div id="body">
<p>hegl gegl</p>
</div>
</div>
</div>
I need to push the h3 in 'contentheader' down alongside the image in 'contentcontainer' while having the body text sit alongside it. Everything is of variable width save the image.
Perhaps an image will demonstrate better:
As you can see, grey corresponds with 'thing', green with 'contentcontainer' and blue with 'contentheader'.
Editing the HTML would be a major hassle. I also can't make anything other than the image fixed-width. Is it possible to do it with just CSS? (It'd be awesome to be able to do it with floats and stuff but I don't know if it's doable)
I don't think you're going to find a perfect solution with CSS. You could use positioning but you would probably run into issues if you had a long title that ran more than one line.
If you're open to using javascript the following non-framework snippet would work.
// Add the header inside the container div just before the body
containerDiv = document.getElementById('contentcontainer');
headerDiv = document.getElementById('contentheader');
bodyDiv = document.getElementById('body');
containerDiv.insertBefore(headerDiv, bodyDiv);
You could recreate this code as a neater, one-liner using jQuery or another javascript framework.
Sure, heres the Css for a rudimentary setup:
http://jsfiddle.net/Nkapr/
Ask if you have any questions.
The problem here is the HTML structure, it's not been written really with your goal in mind (which is a bummer!)
If all you're after is pushing the H3 container 'contentheader' down in line with the rest of the stuff inside 'contentcontainer' you could set a negative top margin on 'contentcontainer' to pull it upwards, and then add a positive top margin to the elements in 'contentcontainer' which need to go down (in this case 'image') giving the impression that the h3 section actually sits in with the rest of the content. It's a bit of a hack but it might do the trick if you can't alter the HTML.
Thirtydot's answewr in the comments section solved my issue.