Every time I include the code for the facebook friends like box the div element box below it goes wacky. I cannot control where its positioned. It either disappears or overlaps a different div. Originally I just wanted specials, events, then fbFriends in a row then the box div below the three divs. I have been trying to wrap the divs to control everything better but am still unsuccessful. Any help would be appreciated
specials events fbFriends
box -------------------box
<div id="specialsWrapper">
<div id="specials" ><p>Featured Specials</p></div>
<div id="events" ><p>What's happening at the hub</p></div>
<div id="fbFriends">
<div class="fb-like-box"
data-href="https://www.facebook.com/pages/********"
data-height="395" data-width="250" data-show-faces="true"
data-colorscheme="dark" data-stream="false" data-header="true" />
</div>
</div>
</div>
<div id="box" ></div>
#specialsWrapper
{
height: 450px;
width: 920px;
color: white;
}
#specials {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 10px 0px 48px;
}
#specials p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#events {
float: left;
border:2px dashed white;
height:390px;
width: 270px;
color: white;
margin: 25px 15px 15px 15px;
}
#events p {
margin: 0px;
padding: 15px;
text-transform:uppercase;
font-size: 24px;
font-style: oblique;
}
#fbFriends {
float: left;
margin: 25px 15px 15px 15px;
width: 250px;
height:390px;
}
#box
{
clear: left;
border: 2px dashed white;
height: 60px;
width: 853px;
color: white;
margin: 25px 15px 15px 48px;
}
Here's anwser for your question
EXAMPLE ON CODEPEN
Your build of these box's is weird thats why I had to use top: 40px; with position: relative;
btw. that's how you do on jsfiddle or codepen exampl, thats all community ask. Spend 5 min for your question isnt much to ask?
hope thats help.
EDIT:
I found what what the issue, you didnt closed specialsWrapper div thats why margin dint work.
I also cancel margin-botton from boxes inside specialWrapper and put overflow: auto to specialWrapper to countheight.
Now top: no need to be writen.
I think what you might want it display: inline-block; but without something to see I can't really know what's going on. And your description isn't enough. Could you post what's going on on js.fiddle.net or give us an example site?
Related
I need to display a border around a div tag with a title in the border itself. In order to do this, this is what I have come up with so far
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
}
.componentTitle {
font-size: 18px;
width: 15%;
background-color: white;
margin-top: -25px;
}
<div class='componentWraper'><p class='componentTitle'>This is the title</p>This is the component body text</div>
As you can see I am using margin property to push the title up on top of the border. I am not sure if this is the proper approach to do this and I have the following questions.
I am positioning the title using pixels (margin) and a fixed value (-25px). This is a site that has to work on mobile phones, tablets as well. Is this an acceptable approach?
I am setting the background-color to white so that the border does not appear behind the text, is this an ok approach?
Is there a better and more acceptable way to do this, I do not want to use fieldset because we have little control over the border (border-radius).
There are three logical ways you can use to achieve this.
You can use a <fieldset> with a legend which is the basic HTML way of doing this. You can find more information about this here.
Use custom CSS with positioning, not negative margins or etc.:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper .componentTitle {
position: absolute;
top: -25px;
background: #fff;
padding: 0 10px;
}
<div class='componentWraper'>
<p class='componentTitle'>This is the title</p>This is the component body text</div>
Use custom CSS with pseudo-elements:
body {
background: #fff;
}
.componentWraper {
margin: 40px; /* just for contrast */
position: relative;
border: 2px solid tomato;
border-radius: 12px;
padding: 20px;
}
.componentWraper::before {
content: 'This is the title';
position: absolute;
top: -10px;
padding: 0 10px;
background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
I think you're on the right track. I'd make a few changes to have more control over the styling. You can use ems or pixels.
Wrap the title and content in a new div and give that a negative margin:
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
.componentWrapper div {
margin-top: -1em;
}
Set your title to display: inline-block and use padding to control the white space around it (instead of using width)
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em;
}
codepen
snippet:
.componentWrapper {
border: solid cadetblue;
border-radius: 40px;
padding: 10px;
width: 95%;
margin-top: 1em;
}
.componentWrapper div {
margin-top: -1.2em;
}
.componentTitle {
font-size: 18px;
background-color: white;
display: inline-block;
padding: .5em .3em;
}
<div class='componentWrapper'>
<div>
<div class='componentTitle'>This is the title</div>
<div class='componentContent'>
<p>This is the component body text</p>
</div>
</div>
This is what I came up with. I wanted to get rid of the negative margin, but couldn't figure out a way to do that.
See the Pen offset title by Yvonne Aburrow (#vogelbeere) on CodePen.
HTML
<div class="componentWrapper">This is the component body text</div>
CSS
.componentWrapper {
border: 1px solid blue;
border-radius: 40px;
padding: 16px;
width: 95%;
margin: 3em;
}
.componentWrapper:before {
content: "this is the title";
font-size: 18px;
width: 10%;
background-color: white;
border: 1px solid blue;
border-radius: 12px;
display: block;
margin-top: -29px;
padding: 3px;
}
I am not sure how a screen reader would deal with the title text being in the CSS (or how you would scale that up if you have a lot of different titles.
I have this problem when I collapse my webpage, the header shrinks instead of staying stretched across the entire page.
In this situation, I really have no idea what code to post along with it. I've tried various ways to fix it and nothing seems to work. Does anyone know what is going on when this happens? Here is my header HTML and CSS:
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
That's pretty much it for the styling though, any help is greatly appreciated!
EDIT
Picture explaining the outcome of the code.
This is what the page looks like right now. This is how I want it to look. But for some reason, I keep getting the problem that I have in the picture above when I collapse the page. I don't want to links to stretch to the outside of my page, that does not fix my problem.
Try this Fiddle
#header {
background-color: #C67171;
display:inline-block;
}
#headtop {
text-align: right;
width: 1000px;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
The problem is when the window is showing greater than 1000px on screen you're page seems to work. When you make it smaller the header will shrink thanks to width: 100%;.
But as we get smaller the div #headtop will stay the same size width: 1000px;. So the header will get smaller but the child element (#headtop) will still be big causing the scrolling you are seeing.
#header {
background-color: #C67171;
width: 100%;
}
#headtop {
text-align: right;
width: 100%;
margin: 0 auto;
vertical-align: middle;
height: 58px;
}
a.nav {
text-decoration: none;
font-size: 15px;
font-family: sans-serif;
color: #ffffff;
line-height: 58px;
padding: 20px 12px;
}
<div id="header">
<div id="headtop">
About
Gallery
</div>
</div>
Here is how you keep the links away from the sides (look at comments for more on that). Give #headertop a max width and then give it a width of 80% or however much you want the gap to have.
JSFIddle Here
I have 2 problems, but the second one can't be address until the first one is corrected. The page was looking and working as intended but when I came to work and started working on the page, it seems to be broken. I am using the same browser in both locations.
The problem is that the background for the div is set to auto, like all my other divs on the same page, but the last one for some reason is not spanning to the bottom of the image.
http://i.imgur.com/9DJa3Fp.png?1
<div class="items">
<h2><a name="friday">Friday catch of the day:</a></h2>
<img src="images/catch.png" align="right" alt="Sage-rubbed Double-cut Pork Chop" />
<p><span class="title">Alaskan Halibut with a Rich Loire Valley Beurre Blanc Sauce</span> - served with mashed purple Peruvian potatoes and haricot verts.</p>
<p><span class="title">Recommended pairing:</span> '98 Passi Emilio Vineyards Sauvignon Blanc</p>
</div>
CSS
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
}
.items img {
float: left;
margin-right: 10px;
float: right;
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
.items p {
font-family: 'PT Sans';
font-size: 16px;
}
.items a {
color: #FFFFFF;
text-decoration: none;
}
.items img {
float: left; <---- ???
margin-right: 10px;
float: right; <---- ???
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
You're floating right and left. Choone one. You also need to clear your floats afterwards for normal flow to resume
add overflow: auto to items class.
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
overflow: auto;
}
One solution could be adding an empty div and clear: both
HTML:
<div class="items">
...
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
JSFiddle
Here you go. Save this code as a snippet for any future development. Just add the class .clearfix to the parent container if it contains floating childs and you're good to go :)
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
I'm attempting to center the logo within my header. I tried the display:block and margin:auto within my #site-title class, but it isn't working.
The link to the code is: http://pastebin.com/iNvhTSBL
And the CSS is: http://pastebin.com/f5mPTjuU
I'm not sure what to do...maybe I'm not doing the CSS correctly?
Any help would be appreciated! The CSS was from a wordpress theme, just letting you all know.
Thank you!
Next time, post only the relevant code bits in your question. That makes it MUCH more likely people will bother to answer.
If this is the code you are referring to:
<div id="header">
<div id="site-title">
<img src="http://i.imgur.com/ysxPP.jpg">
</div>
<!-- other bits stripped for brevity -->
<div class="clear"></div>
</div>
and the css is this:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
float: left;
width: 100%;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
display:block;
margin: auto;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
}
Then you need to revise the css as follows:
1. remove the float: left from the site-title. Unecessary.
2. Note that your padding-right of 40px is going to cause problems with your width: 100%
3. Add text-align: center; to the site-title.
4. Add margin: 0 auto; to your site-title a
The following code will do what you want:
#header {
border-bottom: 1px solid #dedfe0;
padding-bottom: 50px;
}
#site-title {
width: auto;
padding-right: 40px;
overflow: hidden;
line-height: 27px;
font-size: 23px;
text-align: center;
}
#site-title a {
color: #333;
font-weight: bold;
text-decoration: none;
margin: 0 auto;
}
Add this to #site-title
text-align: center;
This should work:
#header {
width: 500px;
margin: 0 auto;
}
</style>
<div id="header">
<!-- div content here -->
</div>
I have a div tag and there is an asp.net TextBox control. I wanted to align the text box to left border. But the text box leaves a space of some 100px on the left. I tried padding:0px, margin:0px, float:left etc... but none solved the issue. It works fine on other browsers. And i already have conditional comments to support different browsers. Any idea why the space comes up on the left on IE 7?
Here is the code
<div class="keywords-div">
<asp:TextBox ID="keywordSearch" CssClass="txt-keywords" type="text" size="30px" />
</div>
.txt-keywords
{
width: 340px;
float: left;
background: transparent;
height: 28px;
border: 0px;
font-size: 18px;
line-height: 38px;
padding: 0px;
margin: 0px;
}
.keywords-div
{
width: 378px;
height: 38px;
text-align: left;
padding: 0px;
margin: 0px;
clear: both;
border:1px solid red;
}
use
_padding:0;
_margin:0;
*paddin:0;
*margin:0;