I'm stumped on this one. What's the most elegant/efficient way to make this happen? I've got an h3 to the left, the repeating symbol/image ("::::::"), and then a link. This occurs between several h3/link areas throughout the site.
Also note, I'm using the twelve column schema, specifically Foundation.
Set a background element with the repeating symbol and a width of 100%, and then set a white background to the text and place it over the background.
<div id="wrapper">
<div id="text1">Featured Courses</div>
<div id="text2">See All Courses</div>
</div>
And CSS:
#wrapper{
width:100%;
background:url(image.png) repeat-x;
height:20px;
}
#text1, #text2{
background-color:#fff
padding:5px
height:10px;
}
#text1{
float:left
}
#text2{
float:right
}
This is probably not exactly what you need but you get the idea.
Related
I have a question pertaining to CSS and HTML. I currently am building an article template, and am a little stumped on one aspect.
I plan to have a picture on one side, and have a text box of the same height on the opposite side. Both are surrounded with div tags as seen in the source following.
<!--begin article-->
<div id="article">
<div id="article_header">
Title goes here
</div>
<div id="article_body">
<!-- begin text. used for actual text of article-->
<div id="text">
Text Goes here
</div>
<!-- end text-->
<!-- begin article media. used for pictures -->
<div id="article_media">
<img src="source_goes_here" alt="This is an image!">
</div>
</div>
</div>
And the CSS...
#article{
border:1px solid gold;
margin-bottom:20px;
}
#article_header{
padding:5px;
font-family:arial;
font-size:36px;
font-style:bold;
color:white;
background:url('orangegradiant.png');
}
#article_body{
padding:5px;
display:inline-block;
width:auto;
}
#article_media{
border: 1px solid pink;
text-align:center;
display:block;
width:48%;
height:48%;
}
#text{
display:block;
width:51%;
float:right;
}
I know I probably over div at times, but I have been toying with this for about an hour and have hit a brick wall. I have the layout set, or so it would seem, by using the float property. The question is how do I get the image div to dynamically change, and have the text div go up or down in size based on the size of the image? Is there a way to set a ceiling for the image size? I would like to see the image be no bigger than about 50% of the div, that way massive images don't skew everything out of proportion.
Any help is greatly appreciated!
P.S. apologies for any code formatting issues. I am still trying to get everything figured out on that front.
Add to your CSS
#article_media img { max-height:50%; }
Or if you want the containing div itself
#article_media { max-height:50%; }
I am trying to add two divs inside the parent div, which has a button inside each div.
I need to fix the width in pixels only for the second div and the 1st div should be having width in % so that the button inside the 1st div should be covering the entire space of the browser.
I need all the widths in % and also I don't want to change either html structure and css because it is already implemented so i just need changes in css property.
Here is my demo
http://jsfiddle.net/zuyyT/2/
P.S : When I scale the browser, the second div is coming in next line. Please scale it and check once.
Fiddle is working on and off ... you can go either one of two ways; using floats (need to change the order of your markup) or positioning - like such ...
<div class="block">
<div class="block_right"> <span>last button</span> </div>
<div class="block_left"><a href="" class="scButton score" > <span>Lorem ipsum</span></a></div>
</div>
and your CSS ...
.block {
display:block; background-color:#FFC; width:100%; float:left; height:30px
}
.block_left{
background-color:#C93; margin-right: 150px;
}
.block_left a{
background-color:#CCC; border-radius:4px; padding:4px; width:100%; display:block
}
.block_right{
float:right; width:130px; background-color:#CC9
}
... using position, you'll need to add position:relative to .block and then right:0 to .block_right; keep the margin on .block_left
Using positioning, you won't need to change the order of the elements in your markup (should that be an issue).
This may be what you require. :-)
.block_right{
position :absolute;
right:0;
top:0;
float:right; width:130px; background-color:#CC9
}
If you give your block_left a width:100% and then use margin-right:-130px; you can leave your html exactly as it is.
The negative right margin leaves space on the right hand side for other elements to fit into even though the element has a 100% width.
This is happening because of the width of right div..u gave 100% to the parent and 80% to the first child..so,when the browser size is 500px(say),the first child will occupy 400px(80%) of it...And when u give 130 px to the second child,it'll come to the next line..that's pretty obvious coz it doesn't have enough space in the first line...so it should be <=100px(for this example)...
I currently have a div with width:auto to fill the entire screen width but I want to put a side bar on the right hand side.
When I float the width:auto div left and fixed width div to the right it goes under instead.
I'm basically looking for something similar to what reddit have with there search bar on the right width the content auto adjusting to the page width.
Thanks
You can make it like this:
Say you have those 2 divs inside a parent container, which expands to fit the page:
<div id="container">
<div id="autowidth">text expands her...</div>
<div id="fixed">This is a fixed column</div>
</div>
In your CSS:
#container {
width:100%;
border:1px solid black;
padding-right:200px;
}
#autowidth{
width:100%;
background-color:red;
float:left;
}
#fixed{
width:200px;
background-color:green;
float:right;
margin-right:-200px;
}
Basically, the parent container holds everything together. It has a padding of 200px (the width of the right col), so that its content doesnt goes beyond that point. In turn, the right col has a margin of -200px, so that it forces the boundaries imposed by the parent padding and places itself always at the foremost right. The other div, actually, now has only the spaces provided by the parent container, constrained by its padding, so its 100% would be, in fact, (100% - (parent's padding)). You can see a working result of this here: jsfiddle.
I'm pretty sure there might be more elegant solutions out there, so bear with me.
if you want to give a background, like it were 2 cols, you can go for the classical 'faux columns' background (see example at a list apart )
You don't strictly need a container div. I did css inline for brevity.
<div style="float:right; width:14em; background-color:#CCC;">
<p>This div is fixed-width.</p>
</div>
<div style="background-color:#EEE; margin-right:14.5em;">
<p>This div is auto-width.</p>
</div>
The answer doesn't work for me, I think it's outdated. Now you have to specify box-sizing: border-box for padding to count to width, but thanks for inspiration. This is my solution.
#autowidth {
float:left;
width:100%;
padding-right:200px;
box-sizing:border-box;
}
#fixed {
float:right;
width:200px;
margin-left:-200px;
}
I want to have 2 boxes right next to each other, one with a fixed width, and another with a width that will change based on the size of the browser. The box has overflow:auto, and I'm trying to get the first box to act as a side bar that will follow you down the page. But of course I can't seem to achieve this, and have come here hoping someone could give me some examples, or point me in the right direction.
Thanks!
To achieve the layout you asked try something along these lines:
HTML:
<div>
<div id="col1">Left Navigation Menu</div>
<div id="col2">Right Content</div>
</div>
CSS:
#col1
{
position:fixed;
width:400px;
}
#col2
{
position:absolute;
left:400px;
}
Will I was trying to think of a good way to do this in CSS, I was channeling my google-fu and found...
http://plugins.jquery.com/project/jStickyScroll
"This plug-in allows you to keep a div element at the top of the browser window when scrolling down a page. The most common use is to keep a sidebar navigation menu from disappearing when scrolling to the bottom of a web page."
You could maybe try...
#element{
position:fixed;
}
Although this doesn't work without hacks in IE6, see
http://www.howtocreate.co.uk/fixedPosition.html
Give this a go (I hope this is what you are after?):
See a live demo here: http://jsfiddle.net/VcecU/
HTML
<div class="main_container">
<div class="content_a">1</div>
<div class="content_lotsoftext">Start. Lots of text goes here! Finish. </div>
</div>
CSS
.main_container{
background-color:#ccc;
overflow:auto;
zoom:1;
}
.content_a{
width:60px;
float:left;
background-color:#3FF;
}
.content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 0 0 60px; /* -- Need conditional for IE6 and 7 to remove the margin to get it to work in those browsers --*/
/*-- The following classes help it to sit better in IE6 and 7 --*/
clear:left;
display:inline;
}
Please note, you will need a IE6&7 conditional to remove the margin, clear and display classes from .content_lotsoftext
Want to reduce the opacity of page contents container background without reducing the opacity of the contents.
<div id="container">
<div id="page contents">
page contents goes here, like amazing articles and all that.
</div>
</div>
Needs to be able to expand with the content, thus can't have a fixed height.
Absolute positioning it underneath the content will mean there will be no relationship between the two divs and it wont expand with the contents, so I think this is a dead end, feel free to say otherwise.
Can't use Jquery as could be too laggy and not instant. Other options preferred please.
May have to use 'png' background images but were hoping not to as it is a template and needs to be able to change colour based on colour schemes.
Could generate images on demand but not ideal.
Oh and to top it off cant use CSS3 as wont work in IE! of course!
Any suggestions?
My first impulse is a transparent PNG.
But looking further and especially with your comment on variable colour schemes, perhaps hooking into RGBA support would work for you. There's a nice post on it (including how to hack around IE - which doesn't support it at all) here:
http://css-tricks.com/rgba-browser-support/
not tested yet, but you get the idea.
<div id="container">
<div id="page contents">
<div id="opacity"></div>
page contents goes here, like amazing articles and all that.
</div>
</div>
#page {
position:relative;
}
#opacity {
position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}
All content of an element will receive it's opacity value, even if you set the content's opacity to 0, you'll stile have the problem... here's a simple solution that I use:
HTML
<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
<span class="menu_title2">MENU PRINCIPAL</span>
<div id="menu_opts">
<ul id="menu">
<li id="menu_home">HomePage</li>
<li id="menu_home">Company</li>
</ul>
</div>
</div>
The CSS:
div#menu_bg {
position:fixed; top:10px; left:10px; z-index:20000;
width:200px; height:50px;
background:#000000;
/* for IE */ filter:alpha(opacity=60);
/*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
position:fixed; top:10px; left:10px; z-index:20001;
width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
position:absolute; top:60px; left:10px;
width:200px; height:275px; overflow:hidden;
}
The trick is simple, have a div behind you content and use position and z-index to place it. Then draw another div with the content, over the last one, and use same position but set z-index above. This way, you'll have a background with the desired opacity, and your content since it's on another div, will get just right!