My code is here (I'm a newbie just playing with some stuff I've learned; I realize this is hardly a work of art, my links all link back to Codecademy, etc - they're just placeholders) Here's the CSS:
head {background-color:#eed393;}
#links {display:inline-block;
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {display: block;
height: 100%;
width: 100%
text-decoration: none;
}
And here's the HTML:
<head>
<div id:"links">
<div id="locationhours";>Location & Hours </div>
<div id="menu";>Menu</div>
<div id="catering";>Catering </div>
<div id="infocontact";>Info & <br> Contact </div>
</div>
I have a div id called #links that I am trying to use for aspects of my links I want to make universal. As you can see, although I am using inline-block, I can't get the links to be in a horizontal line; instead, they bunch up in a vertical line. If I put "div" rather than "#links" in my CSS, the inline-block works, but I'm going to have other div elements I want to use later that I don't want to apply the aspects for the links to. What am I doing wrong?
Here is a demo of your code now inline: http://jsfiddle.net/co738b5s/1/
I found lots of issues. In the "links" div you were using : instead of = to add the id. Also, when you are adding ID's and classes, you do not need the ; that you used. See my html for corrections.
<div id="links">
<div id="locationhours" class="inline">
Location & Hours </div>
<div id="menu" class="inline">
Menu
</div>
<div id="catering" class="inline">
Catering
</div>
<div id="infocontact" class="inline">
Info & <br/> Contact
</div>
</div>
//Had to make a new class for all the menu divs
head {background-color:#eed393;}
.inline {
float:left;
}
#links {
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#infocontact {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {;
height: 100%;
width: 100%
text-decoration: none;
}
The CSS display: inline must be applied to each individual member of the list you want to make inline. The display property is best described as the relationship of a node in its parent, not the relationship of all children. Furthermore, display is a non-inheritable property (see W3Schools), so applying it to the parent node #links won't affect its children (#locationhours, #menu, etc.) whatsoever.
When you changed it to affect div, you unknowingly were affecting all of the children, since they too are divs. To quickly fix this problem without any inline CSS, set each list member's div to the class .listmem, like this...
<div id="locationhours" class="listmem">
...so adding this to your CSS should quickly fix the problem:
.listmem {
display: inline;
}
Related
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.
Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO
In my last question I asked how could I add text onto the gray area of the picture, some guys suggested using <span>, I ended up with all the text (because it is a span after all, inline) on top of each other in a single line (left picture), even though it was set to display:block. How can I break it into seperate lines as seen in the picture on the right?
and does it make sense using h4/h5 for the styling or I should use different div's or something?
HTML:
<div class="rightCol1">
<img src="pic1.png"><span><h4>2014 02 16</h4><h5>po pirmojo etapo <br> naudingiausi - osvaldas <br> sarpalius ir lukas šukutis</h5></span>
<img src="pic2.png"><span><h4>2014 02 16</h4><h5>geriausias sezono <br> startas per visą klubo <br> istoriją </h5></span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:150px;
margin-top:10px;
}
.rightCol1 a {
background:green;
display: block;
position:relative;
height:200px;
width:100px;
margin-bottom: 160px
}
.rightCol1 a span {
line-height:0px;
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80;
left:0;
z-index:1;
}
h4{
padding:0;
margin:0;
font-style:;
color:#e6540c;
font-weight:bold;
font-size:14;
}
h5{
padding:0;
text-transform:uppercase;
color:rgb(193,193,193);
}
It's because your span has no line height, so each on the lines will come out ontop of each other. I suggest removing line-height from your span CSS:
.rightCol1 a span {
display:block;
margin-left:15px;
width:234px;
height:70px;
position:absolute;
bottom:-80px;
left:0;
z-index:1;
}
hi i am working on a site layout , because of my problem and for some other reasons like that it doesn't matter to me if i just can use the layout on my own as well cause i made it.
but the problem is that the pulldown menu isn't working as it is mend to be.
i share with you the code:
<html>
<head>
<style>
body{
background:linear-gradient(to bottom right,#013,#c0c);
color:#930;
}
#nav{
margin-left:auto;
margin-right:auto;
margin-top:40px;
maring-bottom:10px;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:40px;
}
#main{
margin-left:auto;
margin-right:auto;
margin-top:auto;
maring-bottom:auto;
color:#930;
background-color:#cb6;
border:2px solid #930;
border-radius:13px;
-webkit-border-radius:13px;
-moz-border-radius:13px;
text-align:center;
float:center;
width:750px;
height:500px;
}
#nav ul{
list-style:none;
margin:0 auto;
}
#nav li{
position:relative;
float:left;
display:inline;
}
#nav a{
text-decoration:none;
color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background-color:#930;
padding:10px 25px;
height:20px;
display:inline-block;
}
#pull li ul{
display:none;
color:#930;
text-align:center;
position:absolute;
}
#pull li:hover ul{
display:block;
color:#930;
text-align:center;
position:absolute;
}
#pull li ul a{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #930;
background-color:#cb6;
}
#pull li ul a:hover{
display:block;
min-width:80px;
width:auto;
height:25px;
color:#fff;
padding:0px 5px;
text-align:center;
border:2px solid #fff;
background-color:#930;
}
</style>
</head>
<body>
<div id="nav">
<ul id="pull">
<li><b>home</b></li>  
<li><b>page 1 ▼</b>
<ul>
<li><b>page 2</b><li>
<li><b>page 3</b><li>
</ul>
</li>
</ul>
</div>
<br><br>
<div id="main">
de content komt nog
</div>
</body>
</html>
also the online lay-out is see-able for eyes at www.elderpact.tk
the menu bar and everything need to stay like they are
but the drop down menu has to lower the content box if it is opened.
now it goes right trough the content.
also i would like to display the drop down menu direct under the drop down menu opener
(page 1).
could someone please help me?
the risk with create you own dropdown is not work in all browsers. The best solution for this problem is use Bootstrap Twitter. Bootstrap DropDown
Here's a fiddle with the menu the way I think you want it: http://jsfiddle.net/TPLJ8/1/
You basically need to remove the margin and padding from the ul and li elements at the top of your CSS (resets), like this:
ul, li {margin:0; padding:0;}
This will help you start with a clean slate. I also cleaned up your CSS as you don't need to declare the same styling on hovers if that style stays the same.
Your HTML also needed some work. You were missing closing </li> tags and had a bunch of unnecessary <br /> tags.
Hi i'm trying to make a div within the front page of my site that contains a floating img and some floating text h3, p and a . I then want to loop the div below with different text/pic . When i do this once it works fine but the container div hasn't stretched to fit the content . So when I add another below it overlaps .
code:
<div id="blog">
<h1>BLOG</h1>
<div id="postcont">
<img src="blog1.png" width="40" height="40" />
<h3>Playing At The Phenoix</h3>
<p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...read more </p
>
</div>
<div id="postcont">
<img src="blog1.png" width="40" height="40" />
<h3>Playing At The Phenoix</h3>
<p>So we arrived down at the phenoix about 10 past ten .Rommy was all ready out of it and wasn't sure if he could do...read more </p
>
</div>
</div>
#blog {
float:left;
width:400px;
border-top:#0FF solid 6px;
}
#postcont {
padding:10px;
border-top:1px #FFF solid;
margin-top:10px;
}
#blog h1 {
font-size:20px;
color:#FFF;
padding:10px;
padding-left:0px;
letter-spacing:2px;
}
#blog p {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:30px;
letter-spacing:2px;
margin-top:5px;
}
#blog a {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:0px;
letter-spacing:2px;
margin-top:5px;
font-style:italic;
text-decoration:underline;
}
#blog h3 {
font-size:15px;
color:#FFF;
float:right;
clear:right;
width:300px;
margin-right:30px;
letter-spacing:2px;
margin-top:5px;
font-weight:bold;
}
#blog img {
float:left;
clear:left;
}
Block-level elements to not expand to the height of floated elements unless you tell them to. You should add a clearing-element after the last floated element to fix this problem. Instead of:
</div>
</div>
Use:
</div>
<br style="clear: both"/>
</div>
For an extended explanation of this solution, as well as an alternative solution, please see: http://www.quirksmode.org/css/clearing.html