For the following example:
http://developer.yahoo.com/yui/examples/tabview/frommarkup_clean.html
I would like to make the tabs right aligned and still retain the current order.
I'm certain its something simple - just too close to it to see the solution.
Off the top my head, how about:
<div id="demo" class="yui-navset">
<ul class="yui-nav" style="text-align:right;">
<li><em>Tab One Label</em></li>
<li class="selected"><em>Tab Two Label</li>
<li><em>Tab Three Label</em></li>
</ul>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
Have you tried applying "text-align: right;" to the container div :
<div id="demo" class="yui-navset">
?
What da5id and Kevin Le said.
In the CSS file, add this line:
ul.yui-nav { text-align:right; }
It's the same solution.
HTML Code:
<div id="demo" class="yui-navset">
<div class ="tabs-nav" >
<ul class="yui-nav" >
<li><em>Tab One Label</em></li>
<li class="selected"><em>Tab Two Label</li>
<li><em>Tab Three Label</em></li>
</ul>
</div>
<div class="yui-content">
<div id="tab1"><p>Tab One Content</p></div>
<div id="tab2"><p>Tab Two Content</p></div>
<div id="tab3"><p>Tab Three Content</p></div>
</div>
</div>
CSS:
div.tabs-nav {height: 45px;} /* important to set div's height so your tabs navigation does not fall in to the tabs content */
ul.yui-nav { float: right;}
ul.yui-nav li { float: left;}
Related
I may sound stupid, but this is all new to me.
I'm guessing I have overlooked something.I have no ideea how to fill the white spaces between my columns(end-to-end)
This is my code:
<div class="container" id="cfoot">
<div class="col-lg-3">
<h3>despre noi</h3>
<p>Pensiunea Delia</p>
<p>Echipa Noastra</p>
</div>
<div class="col-lg-3">
<h3>link-uri utile</h3>
<p>Intrebari frecvente</p>
<p>Serviciile noastre</p>
<p>Contact</p>
</div>
<div class="col-lg-3">
<h3>ultimele postari</h3>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
<p>Titlul postare blog vine aici</p>
</div>
<div class="col-lg-3">
<img src="imgs/logodelia.png" alt="logobottom">
<p># 2014 Pensiunea Delia. Designed by Kinkara Web</p>
</div>
CSS:
#cfoot.container{
background-color:#f4f4f4;
color:#6c6c6c;
background-image:none;
}
Can anyone help please?
When I use developer tools to look at the markup, I'm seeing this applied by the browser:
body {
display: block;
margin: 8px;
}
If you simply add
body {
margin: 0;
}
.container {
margin: 10px; // adjust as needed
}
I think you'll be on your way.
note: you're also missing the Bootstrap row
<div class="row">
fiddle: http://jsfiddle.net/XEF8v/1/
I'm not quite clear on your question. I think you are asking us how you can use bootstrap to achieve the layout of four columns, like in the second image that you have posted.
You can get most of the way there by using Bootstraps built-in grid system.
Overview of Bootstrap's grid system: http://getbootstrap.com/css/#grid
<div class="container-fluid">
<div class="row">
<div class="col-md-1" id="col-1"><!-- empty space on left --></div>
<div class="col-md-2" id="col-2"><!-- despre noi column --></div>
<div class="col-md-2" id="col-3"><!-- link-uri-title column --></div>
<div class="col-md-2" id="col-4"><!-- ultimele column --></div>
<div class="col-md-4" id="col-5"><!-- delea logo column --></div>
<div class="col-md-1" id="col-6"><!-- empty space on right --></div>
</div>
</div>
The col-md-<#> class determines the horizontal width of a column. Per Bootstrap's documentation, these numbers should add up to 12.
I need to add space between grids, without changing .col-md-4 and .col-md-8 style
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">grid2</div>
</div>
I'd suggest you add a new div element inside any of the .col-md-* and give it a padding (or a margin) (Because you can't edit the default Bootstrap files).
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">
<div style="padding-left: 20px;">grid2</div> <!-- The added div -->
</div>
</div>
Another option is to create a special CSS class and apply it to the rows where you want the wider spacing..
.row.wide-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:20px;
padding-left:20px;
}
Demo: http://bootply.com/110509
Hello I'm trying to create a navigation bar which is made up of several div containers in one big navigation div.
I'm not sure if my approach is right but I tried to do it like this:
<div id="navigation">
<div class="innen">
<div class="logo">
<img class= "logo" src="logo.png" title="Logo"/>
</div>
<div id="bar">
<!-- Navigation Items are in here --!>
</div>
<div id="gamecard">
<!-- Another right floated Element !-->
</div>
</div>
<div class="unten">
<p>You are here: Main</p>
</div>
</div>
I wanted to push down the bar div to meet the height of the image by using top padding:
#bar{
padding-top: 80px;
}
But now it moves the down gamecard container too. How can I prevent this from happening?
I also added a jfiddle:
http://jsfiddle.net/Cv4p2/
try using position:absolute
<div id="bar" style="position:absolute; padding: 80px 0 0 0">
</div>
Padding is intended to add a cushion inside the container in which you implement it. It appears that you would benefit from using margin. You should replace "padding-top: 80px;" with "margin-top: 80px;" and you would achieve the desired effect.
I'm working on a simple layout that requires a header, footer and main content in between. However, something is bugging me a little. If I include an image beneath my header http://www.reversl.net/before/ everything sits exactly where I want. But if I remove the image my header gives itself a margin from the top of the page as shown here http://www.reversl.net/after/ I'm guessing it's related to my floated header and it's floated contents not being cleared. But I've included the clearfix hack and that doesn't seem to have changed things. Any ideas?
<body>
<div class="header clearfix">
<div id="wrap">
<div class="wrap-inner">
<ul id="nav-dash">
<li><img class="header-avatar" src="http://placehold.it/15x15" width="15px" height="15px" alt="" /> YOU ▼
<ul>
<li class="first">one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</li>
</ul><!--.nav-->
<div id="logo">LOGO</div><!--#logo-->
</div><!--.wrap-inner-->
</div><!--#wrap-->
</div><!--#header-->
<div class="wrap-inner">
<h1>Main Content Here...</h1>
</div><!--.wrap-inner-->
<footer>
<div id="wrap">
<div class="wrap-inner">
<p>Footer Text Here....</p>
</div><!--.wrap-inner-->
</div><!--#wrap-->
</footer>
</body>
</html>
It's due to the H1 margin in main content.
.wrap-inner h1 {margin-top:0}
Hmm, why do you use multiple items with id='wrap'?
I added
{
clear:both;
overflow:hidden;
}
to your main content container(it's also a 'wrap'), and it seems to work.
Looks like you haven't set any base styles. For example:
H1 {
font-size:2em;
margin-top:1em;
......
}
try this please
body
{
margin:0;
padding:0;
}
I have this code on a login page:
<div id="header">
<div id="homeBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
I'd like to select div#navigation but only when it follows div#header that contains div#homeBanner. The reason is I have similar code on a different page:
<div id="header">
<div id="siteBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
I don't want to affect the style of div#navigation when it follows div#header that contains div#siteBanner. Does this make sense?
How do I select div#navigation only when it follows div#header that contains div#homeBanner? I thought it was:
div#header div#homeBanner > div#navigation
... but that doesn't seem to work.
Problem here is that you're trying to select the sibling of a parent element based on the parent's child, which isn't possible in CSS.
Your best bet is to add a class to #header (or even body) based on that information then make use of that class.
For example:
<div id="header" class="home">
<div id="homeBanner">
...
</div>
</div>
<div id="navigation">
...
</div>
With this selector (as mentioned by others, use + for siblings, not > for children):
#header.home + #navigation
Please try the following code:
div#header + div#navigation
Use the + for sibblings.