I'm developing a website using drupal's (7.14) Marinelli theme as a template. I'm currently fighting with getting the main menu onto the same line as the logo. The url of my page is http://quaaoutlodge.com/drupal-7.14/ - can anybody help me on how I have to set the css properties or put the html together to get this aligned properly? The icon should be on the left side of the main menu and the yallow background is just for debugging reason.
Any help would be appreciated!
Thank you!
The code in page.tpl.php currently looks like this:
<div style="background:#000; height:85px; position:fixed; top:0px; width:100%; text-align: right;padding-right:-20px; filter:alpha(opacity=60);border-bottom:1px solid #999;">
<div style="text-align: left;
top:0px;
width:70%;
padding-left:100px;
padding-right:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFF00;"><?php if($logo):print $imagelogo;endif ?>
<div id="navigation-primary" class="sitemenu">
<?php print $mainmenu; ?>
</div></div>
The easiest solution would be to set position:absolute on both divs together with a top: and margin-left: property to always fix them relatively. You could also float them both left for instance, set a width property and a margin-left on the right div.
Here, this is what you'd need to do : http://jsfiddle.net/Z4EAb/
The main problem is that the second div (the one that wraps the logo & navigation) is too small to fit the logo and navigation comfortably.
First, please give that second div an id ("header-wrapper", for instance) and take out the style attribute. Then here's the relevant CSS:
#header-wrapper { width: 1038px; margin: 0 auto; }
#logo { top: 15px; position: relative; }
#navigation-primary { float: left; margin-left: 50px; padding-top: 34px; }
Don't be afraid of using negative margins to position things around each other.
See also:
http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/
Related
I am wanting to, if possible, align a set of text (<p>TextHere</p>) relative to where a image is. I have an image centered horizontally on my page:
.headerlogo {
height: 60px;
width: 70px;
position: fixed;
z-index: 99;
margin-top: 5px;
left: 50%;
margin-left: -35px;
}
Now, I want some text to be 50px to the right/left of that... I thought there may be some sort of way to do so using something similar to margin-left but so far haven't come up with anything.
I know that I can put text a certain distance out from the left using margin-left: 600px; so that it looks good and next to the image, but as you all know, this will move on window resize.Any help would greatly be appreciated as I am still new at positioning...
as you didn't post the relavent code of your problem but still i try to display the text next to the image with margin-left:50px. and it will not gonna move on windows resize .
Here is the jsFiddle link http://jsfiddle.net/datechogeek/qU6Cb/
Keep the position:absolute for your text and add left,right position as per your need . It would be nice if you can post your complete HTML code.
Were you trying something like this?
HTML
<div class='wrapper'>
<p class='leftText'>Left text</p>
<img class='headerlogo' src='http://m.c.lnkd.licdn.com/media/p/2/000/19b/1b2/065601a.png' alt='your_image'/>
<p class='rightText'>Right text </p>
</div>
CSS
.wrapper{
position:relative;
height:60px;
width:280px;
margin:auto;
}
.headerlogo {
position:relative;
float:left;
height: 60px;
width: 70px;
margin-left:50px;
margin-right:50px;
}
.leftText, .rightText {
position:relative;
float:left
}
Fiddle Link
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/
First time asking a question :)
My header DIV has a background that is curved like a wave. I have a sidebar floated to the right located in a DIV underneath the header DIV. The background image for header curves up right where sidebar is which leaves a gap where sidebar hits the bottom of the header div (because obviously divs aren't curved). I need the background of sidebar to extend underneath header so there is no gap. What should I do?
HTML:
<div id="header"></div>
<div id="body>
<div id="main-content"></div>
<div id="side-bar></div>
</div>
CSS:
#header{
width:100%;
height:272px;
margin:0 auto;
background-image:url('../img/header.png');
background-repeat:no-repeat;
text-align:center;
}
#body{
width:960px;
height:auto;
margin:0 auto;
padding-bottom:159px;
}
#main-content{
width:60%;
height:auto;
margin:0 auto;
float:left;
padding:15px;
background-color:#fbf8ee;
}
#side-bar{
width:30%;
height:auto;
margin:0 auto;
float:right;
padding:10px;
background-color:#961912;
border-right:thick #558c21 solid;
border-left:thick #558c21 solid;
}
![Here is a screenshot of what it looks like currently. The sidebar has no content so it is narrow but I want it to extend up behind the header image so there is no gap.1
Not 100% sure on what you're wanting to achieve, but if you're wanting the sidebar to show behind the header and extend upwards, try adding to the sidebar style:
margin-top: -100px; /* Higher or lower number depending on how far up you want it to go */
position: relative;
z-index: -1;
Not really sure if I understand you correctly but try to add:
position: relative;
top: -10px;
to #side-bar as you can see here http://jsfiddle.net/NpZJV/
If I may advice, don't use % for width/height and positions use px instead.
You could use CSS3 to make a background size, check it out to see if it solves your problem.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Try using
background-size: 600px 2921px;
You might be able to get it to fit
Dear Friends I am so struggling on about a problem came to me in my web design.
My layout as follows,
<div class="main_div">
<div class="left_column">
<div class=="fixed_div"></div>
</div>
<div class="mid_column"></div>
<div class=="right_column"></div>
</div>
and css file look like
.main_div{
float:left;
width:80%;
}
.left_column{
float:left;
width:20%;
}
.mid_column{
float:left;
width:40%;
}
.right_column{
float:left;
width:20%;
}
What i wanted to do is i need to make the fixed_div fixed inside the parent element and give the width to 100%. But it always comes out of the left_column. How would i overcome this problem please help. Thanks
Please note that sometimes i am changing left_column's width from jquery.So at that time the fixed_div must also adjust as the left_column.
For block elements your issue is fixed by default cos they have width: auto;. Do not adjust #fixed_div width at all and it'll work.
P.S. Using IDs for selecting all elements in css - isn't a good style, better rework it to the classes.
You have floated all elements for this you must use clearfix technique to remove any error. And set .fixed_div to display: block; . If this do not help you please place a Demo. What actually you have been in problem.
This should help:
.fixed_div {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.left_column {
position: relative;
float:left;
width:20%;
}
Okay guys I have a question about positioning tables within DIV's using CSS.
I have code as follows:
css:
#content{
float:right;
padding-top:10px;
width:450px;
line-height: 18px;
font-size:13px;
text-align:left;
}
#content .reviewTable{
width:20px;
}
#news{
line-height: 18px;
width:150px;
}
#news h2 {
margin: 0;
padding: 0;
font-size: 16px;
}
#news p {
margin: 0;
padding-bottom: 20px;
padding-right:10px;
font-size:13px;
}
HTML:
<div id="content">
<div class="reviewTable">
<table>
<td></td>
</table>
</div>
</div>
My table sits far away from my news DIV there is some padding around the news DIV however I have removed that and it didn't make any difference to the positioning of the table. I have been looking at other Stack Overflow posts but can't seem to find what I am looking for. I have tried absolute and relative positioning in my CSS and also width and none of these work not the table where they have worked on other elements such as plain text.
I have also tried the table as <table class="reviewTable"></table>
My question is does the code need to be in a certain format in order to allow the positioning of tables in a DIV which already has CSS formatting applied to it?
Just looking for a hint in the right direction guys if you could help me out or anyone else has a similar problem as this it would be great.
Thanks
The reason your table is flowing outside is that you are floating it right. Then you have the width set to be too small for the review area so it makes it go outside. Change the width of the #content to 600px and you'll see what I mean.
For the way you have it setup you need to set the #content to 610px. Set the #page-container to overflow:hidden to prevent anything showing if its outside your container. And take off the width on .reviewTable