I have a logobar I'd like to have at the top of my website.
I want this to be a simple text with an image next to it.
I'm using the following code but the image displays underneath the text.
I am using a div which has both the text and image in a list which I've set to inline but they are not displaying in one line.
<doctype! html>
<html>
<head>
<title> Breaditt </title>
<style>
html, body {
font-family: sans-serif;
margin: 0;
padding: 0; }
#logobar {
background: rgb(206, 211, 255);
display: inline-block; }
#logobar ul {
list-style-type: none;
margin: 0; }
#logobar li {
display: inline; }
#logobar p {
font-size: 18;
font-family: Comic sans MS; }
</style>
</head>
<body>
<div id="logobar">
<ul>
<li><p> Breaditt </p></li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="100" height="100"></li>
</ul>
</div>
</body>
</html>
You should remove the paragraph around your text. The paragraph is block element and it will break the line:
<div id="logobar">
<ul>
<li>Breaditt</li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="100" height="100"></li>
</ul>
</div>
Another option is to inline the paragraph as well:
#logobar p {
font-size: 18;
font-family: Comic sans MS;
display: inline;
}
Change:
#logobar li {
display: inline;
}
to
#logobar li {
float: left;
}
jsFiddle example
No need to use list. Try:
<div id="logobar">
<p> Breaditt </p>
<img src="img/logo.jpg" alt="breaditt cat" width="100" height="100">
</div>
with CSS:
#logobar>* {
display: inline; }
Example
Related
When I open the page on the phone it is not centered instead all goes to the left side, whereas when I open it on the computer everything looks nice.
I tried to add and remove codes to the page for example add min-width/max-width,change valutes - %/px .
HTML--------------
<html>
<head>
<title> Farbawlesie </title>
<link rel="stylesheet" type="text/css" href="styl.css">
<meta http-equiv="Imagetoolbar" content="no" />
<link rel="icon" type="image/png" href="naszywka3.gif">
<link rel="shortcut icon" href="farbawlesie.pl/favicon.ico">
<meta charset= "UTF-8">
</head>
<body oncontextmenu="return false" background="las.jpg">
<div id="page-wrap">
<div id="baner">
<img src="banern.png" height="250">
</div>
<hr color="white">
<br><br><br>
<center>
<div id="menu">
<ol>
<li><font color="yellow">⇒</font> Start</li>
<li><font color="yellow">⇒</font> O nas
<ul>
<li>
Drużyna
</li>
<li>
Zasady
</li>
</ul>
</li>
<li><font color="yellow">⇒</font> Terminarz</li>
<li><font color="yellow">⇒</font> Forum</li>
<li><font color="yellow">⇒</font> Galeria</li>
<li><font color="yellow">⇒</font> Kontakt</li>
</ol>
</div>
</center>
<br><br><br><br>
<hr color="white">
<br><br><br><br>
<font size="5" color="white" family="Times">
Witaj na naszej stronie ! ☺
<br>
Masz pytanie ? Skontaktuj się z nami ! Więcej w zakładce "Kontakt".
<br><br>
<center>
<div id="srodek_naglowek">
<img src="dr.jpg" width="850px" height="420px"/>
<img src="baner.png" width="850px" height="420px" />
<img src="farba.jpg" width="850px" height="420px"/>
<img src="far6.jpg"width="850px" height="420px"/>
<img src="3.png" width="850px" height="420px"/>
<img src="swt.jpg" width="850px" height="420px"/>
</div>
<center>
<br><br><br><br>
<hr color="white">
<br><br>
<center>
<font color="red"><h2>Naszywki członków drużyny</h2></font>
<img src="naszywka3.gif">
<font size="3" color="white">Otrzymuje każdy członek</font>
<br><br><br>
<img src="naszywka2.gif">
<font size="3" color="white">Otrzymuje osoba która brała 3 razy udział w nocnym strzelaniu</font>
<br><br><br>
<img src="naszywka1.gif">
<font size="3" color="white">Otrzymuje osoba która ma 5 letni staż w stowarzyszeniu</font>
<br><br><br>
<hr color="white">
<div id="stopka">
Copyright © Wszelkie prawa zastrzeżone
</div>
</div>
</body>
</html>
CSS-----------------
head {
text-align: center;
}
body {
width: 100%;
margin: auto;
}
#srodek_naglowek {
text-align: center;
}
#baner {
text-align: center;
}
a {
text-decoration: none;
color: white;
text-align: center;
}
#page-wrap {
width: 100%;
margin: 0 auto;
}
#menu {
text-align: center;
width: 100%;
font-family: Arial;
}
ol {
text-decoration: none;
color: white;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
height: 2em;
line-height: 2em;
text-align: center;
}
ol > li {
float: left;
width: 150px;
}
ol > li > a: hover {
color: grey;
}
ol > li: hover {
}
#stopka {
color: white;
text-align: center;
font-size: 10px;
}
ol {
}
ol > li > ul > li {
}
ol > li > ul > li: hover {
}
ol > li > ul > li: hover a {
color: grey;
}
ol > li > ul {
display: none;
}
ol > li: hover > ul {
display: block;
}
ol > li > ul {
display: none;
}
ol > li: hover > ul {
display: block;
}
WEBSITE:
http://www.farbawlesie.pl
Your header image has a hard-coded width of 1300px. In smaller screen sizes, there is no room to fit the image, so you're seeing the overflow. Adding the following CSS is one way to fix this:
#baner img {
max-width: 100%;
height: auto;
}
The main culprit would be the hard-coded dimensions on the images. If you set width and/or height on the image, the browser will not recalculate its size and stretch some of the divs just to fit them in.
The quickest fix would be to remove the height from this image by changing this:
<img src="banern.png" height="250">
to this:
<img src="banern.png">
and then allowing this image to take 100% width:
#baner img {
width: 100%
}
This however won't center align your other row of images.
To help the situation, you could update your body properties with overflow-x:hidden, to remove the scroll in the bottom.
I'm trying to get this Html code to align in a horizontal like display form. It might have some un-neccessary id's,classes,etc.
Could you tell me what I am doing wrong?
ul.head {
text-transform: Capitalize;
word-spacing: 10px;
font: italic bold 20px/60px"Times New Roman", Times, serif;
list-style-type: none;
margin: 0;
padding: 0;
}
.H2 {
display: inline;
}
<h1><p id="p1"><em>ENVY</p></em></h1>
<img id="img1" src="envy.jpg" width="150" height="113">
</ul>
<!--End of HEADING-->
<ul class="head">
<!--Start of top tabs/drop down menu-->
<h2>
<li id="H2"><ul id="T1" >New york</ul>
<ul id="T2" >Miami</ul>
<ul id="T3" >Boston</ul></li>
</h2>
</ul>
you have some syntax error in your code :
.H2{ display: inline; }
you can't target an h2 with the DOT , dot's only to target classes
li's inside an h1 you can ,but it's highly recommended that you use one only h1 tag for each page to set main title , you can use a div to structure your page element instead
i added this to your css , hope that this is what you need :
.newnew{
position: relative;
top: -140px;
}
ul li a { display: inline-block; padding: 10px; font-size: 13px;}
LIVE DEMO
hello dear please check this link DEMO
CSS
ul.head{
text-transform: Capitalize;
word-spacing: 10px;
font: italic bold 20px/60px "Times New Roman",Times,serif;
list-style-type: none;
margin: 0;
padding: 0;
}
li ul{
display: inline;}
I am trying to learn CSS and HTML and have a very basic question here. How do i write my css so that it shows the text in the span below the image
<div class="section">
<ul>
<li id="lumia820" class="figures" >
<img src="f-lumia820.jpg" alt="" class="figure"/>
<span class="figcaption">Lumia 820</span>
</li>
<li id="iphone4s" class="figures">
<img src="f-iphone4s.jpg" alt="" class="figure"/>
<span class="figcaption">Iphone 4s</span>
</li>
</ul>
</div>
Currently, I have something like
.section ul {
margin: 0 auto;
float: left;
}
.figures {
display: inline;
}
.figures span {
font-size: 20px;
font-family: "Book Antiqua", "Palatino Linotype", Georgia, serif;
letter-spacing: 0.1em;
}
.figures img{
vertical-align: top;
width: 30%;
height: 30%;
margin: 1% 1%;
}
Just set the to display: block; so that each one takes up its own line. Right now, they are set to display: inline because that is the default for both <img> tags and <span> tags.
.figures span, .figures img {
display: block;
}
should be able to do
.figcaption {
display:block;
}
fiddle
This should do the trick:
.figures span{ display: block; }
Check this Demo : http://jsfiddle.net/h6McP/1/
Span and image is actually an inline element, so it wil come line by line
we need to make to block element so that span will come exat below of the image
here i have given
.figures span {display:block}
li.figures { display: inline-block;}
Check this is Updated one
A bit new to styling sheets. I have a div for my site's content. I've aligned my h1 to be in the middle of that div by using the margin-right property. When I use the margin-right property on the p tag within the same div, however, it also affects the h1 and moves that further left. I figure I shouldn't be using margin-right, but what is the best way to do this?
Please let me know if my question is unclear.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>
Putnam County Family Support Services - Resources
</title>
</head>
<body>
<div id="container">
<div id ="top">
<center><img src="images/logo1.jpg" alt="logo" /></center>
</div>
<div id="navigation">
<ul>
<li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';">
<img src="images/home_nav.jpg" name="MyImage4"></a> </li>
<li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';">
<img src="images/services_nav.jpg" name="MyImage3"></a> </li>
<li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';">
<img src="images/resources_nav.jpg" name="MyImage2"></a> </li>
<li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';">
<img src="images/staff_nav.jpg" name="MyImage1"></a> </li>
<li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';">
<img src="images/contact_nav.jpg" name="MyImage"></a> </li>
</ul>
</div>
<di id="content">
<h1>Contact</h1>
<p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>
<p>Phone number:</p>
</div>
<div id ="footer">
</div>
</div>
</body>
</html>
CSS:
body {
background: #f3f6f3;
text-align: center;
}
#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}
#top {
padding-bottom: 25px;
}
#navigation {
float:left;
position: absolute;
}
#navigation ul {
list-style: none;
padding-top: 20px;
}
#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}
#content {
float: right;
border: 1px;
}
#content h1 {
margin-right: 175px;
}
#content p {
margin-right: 170px;
}
#footer {
clear: both;
font-size: 12px;
}
Try using percentages rather than absolute values to place items, to center an inline block element (if the element width is set) you can use : margin-right : auto; margin-left: auto;
To center your H1, you should use the property :
#content h1 {
text-align: center;
}
#content p {
text-align: left;
}
this centers your text, have a look here
It would be quite handy if I could have a look at your HTML as well.
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}