I want a single line, text + text + central bar (must fill the remaining width).
I tried this:
HTML:
<div class="title-cont">
<div class="title-num">1.</div>
<div class="title-text">Title from section</div>
<div class="title-bar"></div>
</div>
CSS:
.title-cont { float:left; clear:left; width:600px; white-space:nowrap; overflow:hidden; }
.title-num { float:left; font-size:20px; color:red; }
.title-text { float:left; font-size:16px; color:blue; }
.title-bar { float:left; width:100%; height:5px; background:red; }
URL: http://fiddle.jshell.net/5bt4S/2/
Stop floating the last <div> and hide the overflow for it and you'll get what I think you're going for:
.title-bar { overflow:hidden; height:5px; background:red; }
The bar will fill all of the available width.
JSFiddle
Try this
.title-cont { float:left; width:600px; white-space:nowrap; overflow:hidden; }
.title-num { float:left; font-size:20px; color:red; }
.title-text { float:left; font-size:16px; color:blue; }
.title-bar {display:inline-block;width:100%; height:5px; background:red; }
Change your css to this
.title-cont { float:left: clear:left; width:600px; white-space:nowrap; overflow:hidden; }
.title-num { float:left; font-size:20px; color:red; }
.title-text { float:left; font-size:16px; color:blue; }
.title-bar { overflow:hidden; height:5px; background:red; }
Related
ok so the thing here is , the only way i can get the password_photo_galleries to go where they need to be is adding an extra button on the navbar to open that info.. what im trying to do is have the navbar button MyGallery bring up both photo_galleries, and password_photo_galleries, but i can't seem to figure out how to get it to combine with that one button.. any help would be much appreciated, i also just thought about something, the only way i can think it might work is make the button My Gallery do a drop down with two buttons My Gallery / Password Gallery but my navbar is -90deg so i dont know how that would work , but just a thought.. either way will work fine.. thanks again
#profile_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
color:#FF00FF;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
#profile_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_password_photo_galleries {
width:400px;
height:600px;
color:#000000;
font-family:"Baskerville Old Face",serif;
font-style:italic;
font-size:20px;
background-color:rgba(0,0,255);
position:absolute;
top:200px;
right:-1200px;
padding:40px;
transition:left 0 ease-in-out;
}
#profile_photo_galleries:target {
right:80%;
margin-right:-520px;
}
#profile_password_photo_galleries:target {
right:80%;
margin-right:-520px;
}
.photo_gallery {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.password_photo_galleries {
position:fixed;
bottom:0;
left:0;
width:96.9%;
margin-bottom:0;
background-color:rgba(0,0,0,0.5);
z-index:99;
}
.photo_gallery .heading,.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.password_photo_galleries .heading {
text-transform:uppercase;
font-size:38px;
font-weight:normal;
border-bottom:1px dotted #666666;
padding-bottom:10px;
margin-bottom:20px;
}
.photo_gallery .images a,.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.password_photo_galleries .images a {
display:block;
float:left;
border:5px solid #000;
margin-right:10px;
margin-bottom:10px;
}
.photo_gallery_preview,.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.password_photo_galleries_preview {
border:1px solid #333;
overflow:auto;
padding:20px 15px;
width:100px;
background-color:#000;
}
.photo_gallery_name a,.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.password_photo_galleries_name a {
color:#FFF;
margin-bottom:20px;
display:block;
text-transform:uppercase;
}
.photo_gallery_link {
display:block;
margin-bottom:15px;
}
.password_photo_galleries_link {
display:block;
margin-bottom:15px;
}
.photo_gallery_count {
font-style:italic;
color:#666;
}
.password_photo_galleries {
font-style:italic;
color:#666;
}
HTML CODE FOR THE NAVBAR
<div id="right_menu">
<span>my gallery</span>
<span>Password</span***this is the one i would like to open up with just the button my gallery or if you could make a drop down for a rotation -90deg span for my nav bar that would be awesome****
</div>
here is the navbar , no links
#right_menu {
position:fixed;
font-size:15px;
top:0;
right:0;
background-color:#FF00FF;
width:50px;
height:100%;
}
#right_menu a {
text-align:center;
display:block;
padding:10px;
height:15%;
width:50px;
margin-bottom:0;
text-transform:uppercase;
position:relative;
}
#right_menu a:nth-child(1) {
background-color:#FF00FF;
color:#FFF;
}
#right_menu a:nth-child(1) span {
display:block;
position:absolute;
top:40px;
left:-40px;
width:130px;
color:#FFF;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transition:left .3s ease;
}
#right_menu a:nth-child(1):hover span {
left:-45px;
}
Every DOM element has a single id. you could approximate it using something like this
<div id='id1'><span id='id2'></span></div>
and then use navigation to get what you really want.
I set the image header width to 100% and when i check the max-width of 959px or lower[i set it to that] i notice the image does not respond and move along like it should. It actually gets even bigger than normal for some reason. My aside and section are working properly however.
jsfiddle - http://jsfiddle.net/u04xr6pd/2/
<div class="container">
<header>
<img src="images/header.png" alt="taffies logo">
</header> <!-- end of header -->
</div>
CSS
#media screen and (max-width:959px){
.container{
width:100%;
}
.sidebar{
width:30%;
}
.first_article{
width:50%;
}
header img{
width:100%;
}
}
I would recommend this code...
header img{
width:calc(100% - 50px);
margin:0 auto !important;
}
and apply that EXACT same width to this class .first_article to make it more responsive.
You also have this code in your CSS:
header img {
padding: 43px;
margin-left: 260px;
}
So when your window width is less than 959px, your image will have width: 100% but also the padding and margin, pushing it to the right. You need to add rules for padding and margin in your #media code as well. Something like:
#media screen and (max-width: 959px) {
header img {
width: 100%;
padding: 0 !important;
margin: 0 !impotant;
}
}
Adjust the numbers as needed.
The !important is there because you've defined the #media section first, which would then be overridden by the normal rules defined later. If you move the #media section below the normal rules, then you don't need !important.
You have several misconceptions, but I can see you're trying and learning, so I want to give you some recognition on that. Now, for your problem, there are some thing to change, but the most important part: media queries goes AFTER the default definitions, not at the top, or you'll always have issues. So you need to change that, and then alter some things in your CSS, just not as many as when you started with this project a week ago or so. So take a look at your forked and cleaned fiddle
* {
margin:0px;
padding:0px;
list-style-type:none;
}
header, nav, section, article, aside, footer {
display:block;
}
.container {
width:960px;
margin:0 auto;
}
body {
background-color:#e8d4cb;
}
header img {
padding:43px;
margin-left:260px;
}
.first_article {
float:left;
width:500px;
margin:25px;
}
.first_main_paragraph {
font-family:arial;
font-size:20px;
color:#846a5f;
margin-bottom:50px;
}
.second_main_paragraph {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.first_article .contact_button {
float:left;
margin-top:165px;
}
.first_article .cupcake {
float:left;
margin-top:20px;
margin-left:19px;
}
.sidebar {
float:left;
margin:30px;
margin-right:40px;
}
nav ul li a {
text-decoration:none;
font-family:myriad pro;
font-size:20px;
color:#3d2316;
display:inline-block;
padding-left:85px;
padding-right:29px;
padding-top:26px;
padding-bottom:26px;
width:39%;
}
nav ul li:hover a {
color:#e8d5cc;
}
nav ul li {
margin-bottom:3px;
background-color: #CBAFA2;
}
nav ul li:hover {
background-color: #3D2316;
}
.company_info {
background-color:#cbafa2;
padding:20px;
text-align:right;
margin-bottom:100px;
font-size:14px;
color:#3d2316;
font-family:myriad pro;
}
.about_section {
float:left;
width:500px;
margin:25px;
}
.about_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.about_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
.orders_section {
float:left;
width:500px;
margin:25px;
}
.orders_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.second_order {
margin-top:50px;
}
.order_text {
font-family:arial;
font-size:11px;
color:#846a5f;
}
.order_numbers {
color:#3D2316;
}
.gallery_section {
float:left;
width:600px;
margin:25px;
}
.gallery_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_section {
float:left;
width:500px;
margin:25px;
}
.contact_title {
color:#3d2316;
margin-bottom:50px;
font-family:arial;
font-size:30px;
}
.contact_text {
font-family:arial;
font-size:13px;
color:#846a5f;
}
footer {
clear:both;
font-family:arial;
border-top:1px solid #aa8573;
height:100px;
}
footer p {
color:#784f3d;
margin:10px;
float:left;
margin-right:370px;
margin-top:30px;
}
footer ul li a {
text-decoration:none;
font-size:13px;
color:#784f3d;
float:left;
margin:10px;
margin-top:30px;
}
footer ul li a:hover {
color:#3d2316;
}
figure {
float:left;
margin:25px;
}
figcaption {
text-align:center;
font-family:arial;
font-size:13px;
color:#846a5f;
margin-top:15px;
}
span {
font-family:arial;
font-size:15px;
color:#846a5f;
font-weight:bold;
}
#media screen and (max-width:959px) {
.container {
width:100%;
}
.sidebar {
width:30%;
}
.first_article {
width:50%;
}
header {
text-align:center
}
header img {
width:100%;
max-width:462px;
height:auto;
padding:0px;
margin:0px auto;
}
}
As you will notice, besides moving the media queries, I'm removing your margins and paddings for the image since you don't need them at all, centered everything inside the header and limiting the width of your image so it will be 100% UP to 462px which is the real size of your image. And that's it, your image now is perfectly centered and isn't out of control. And while you still have several issues in your page, you're really close (btw, it's a show of respect to vote up and accept answers since you're getting so much help here)
I'm trying to make a navigation bar for my website, but the 'info' button will not stay inside the parent. Here is my HTML:
<div id="header">
<div id="homeB">
HOME
</div>
<div id="infoB">
INFO
</div>
</div>
<div id="main"></div>
And my CSS:
#header {
height:11%;
width:70%;
background:violet;
margin-left:15%;
}
#main {
height:100%;
width:70%;
background:blue;
margin-top:1%;
margin-left:15%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display:inline-block;
}
#homeB {
width:20%;
height:100%;
background:red;
}
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
#infoB {
width:20%;
height:50px;
background:red;
float:right;
left:64.2%;
}
#infoBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
}
Could someone clear up why this is not working?
Thanks, I'm not great at a lot of HTML and CSS elements, so any extra help would be appreciated too :)
Give float: left; to the #homeBTEXT and also clear the #header!
#homeBTEXT {
display:block;
font-size:250%;
text-align:center;
text-decoration:none;
font-family:Impact, charcoal, sans-serif;
color:blue;
float:left;
}
#header {overflow: hidden;}
Preview
Fiddle: http://jsbin.com/setipusabihu/1
I have the following setup:
<div id="container">
<div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
<div id="img"><div id="content"></div></div>
</div>
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:95px;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
I want when div img gets hidden (display:none) that div msg gets 100% width of the parent. Butt he text needs to stay centered.
http://jsfiddle.net/ELKQg/801/
Display:table; is a good idea but those rule should be dispatch to main container and its two childs in order to be efficient with your goal.
Hover the demo to hide #img and see #msg filling whole width of #container:
DEMO
#container {
display:table;
width:182px;
height:60px;
}
#msg {
width:95px;
display: table-cell;
vertical-align: middle;
background:#666;
text-align: center;
}
#msg p {
font-size:13px;
color:#eee;
}
#img {
width:87px;
vertical-align:middle;
display: table-cell;
background:#333;
}
#container:hover #img {
display:none;
}
#content {
width:80px;
height:45px;
background:#ccc;
}
I guess a change in the message width might do the job:
$("#msg").on('click', function(){
$("#img").css('display', 'none');
$("#msg").css('width', '100%');
});
Hi this is possible with jquery.I have added the script that will solve this issue.
For testing i have added display:none; in #img id.
<style type="text/css" >
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:95px;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
display:none;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
.w100{
width:100% !important;
}
</style>
<div id="container">
<div id="msg"><p>Lorem ipsum dolor sit amet.</p></div>
<div id="img"><div id="content"></div></div>
</div>
<script language="javascript" >
if ($('#img').css('display') == 'none') {
$( "#msg" ).addClass( "w100" );
}
</script>
Here is another solution that will work without jquery but you need to change the structure.
<style type="text/css" >
#container{
position:absolute;
width:182px;
height:60px;
}
#msg{
width:100%;
height:60px;
float:left;
display: table;
background:#666;
}
#msg p{
font-size:13px;
color:#eee;
text-align: center;
vertical-align: middle;
display: table-cell;
}
#img{
width:87px;
height:60px;
float:right;
background:#333;
display:none;
}
#content{
position:absolute;
top:7px;
width:80px;
height:45px;
background:#ccc;
}
</style>
<div id="container">
<div id="msg">
<p>Lorem ipsum dolor sit amet.</p>
<div id="img"><div id="content"></div></div>
</div>
</div>
im just trying to do a normal Navigation but i seem to fail at it since i haven't done something like that in a long time. So here is what i got:
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
</div>
</div>
and:
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
top:-1px;
left:-5px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
I just want to have:
- a complete header at the Top, which is #Top, convering the whole area at the top from left to right (width:100%).
- In the #Top header i want to display some Links done via #Navi. However i want to display #Navi in the bottom right corner of #Top. So i figured i would do #Top to position relative and #Navi position:absolute, but it doesnt work.
- Then i wanted the link color to be white, but somehow it doesnt work - why?
- Why do i need to use which i think is not cool? Without using the complete #Navi div wouldn't show up!
Thanks a lot!
try giving #Navi
bottom:0px and right:0px;
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#4E6011;
position:relative;
}
#Navi {
width:100%;
position:absolute;
bottom: 0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
background-color:#121212;
color:white;
text-decoration:none;
float: right;
}
not sure what are you trying, but here is a link: http://jsfiddle.net/4JdmH/
<div id="Top">
<div id="Navi">
<div class="Link">
link1
</div>
<div class="Link">
link2
</div>
<div class="clr"></div>
</div>
</div>
#Top {
width:100%;
min-height:100px;
height:15%;
max-height:200px;
background-color:#C6E466;
border-bottom: 2px solid #4E6011;
position:relative;
}
#Navi {
position:absolute;
bottom:0px;
right:0px;
}
.Link {
height:20px;
margin-left:10px;
min-width:150px;
width:10%;
max-width:200px;
float:left;
background-color:#121212;
color:white;
text-decoration:none;
}
.clr {
clear: both;
}