Please firstly visit my webpage tristans.ml/.. and make your browser window less that 1000px wide, then open the menu and there you have my issue.
I don't know a good way to solve this problem. The code is as follows:
First the media queries in css:
#media all and (max-width:1000px){
#nav_holder{
width:100%;
height:54px;
z-index:2;
}
nav{
}
.first_menu{
display:none;
background:#161619;
}
.logo_b{
top:0;
float:right;
display:block;
}
#logo{
padding:0;
}
#ttrgovina{
width: 200px;
}
#container{
margin-top:54px;
}
}
Then there is the html code (sorry if it's a mess):
<div id="nav_holder">
<div id="logo">
<span class="logo_b" id="nav_button"><img width="55" height="55" src="style/images/menu.png" alt="Menu"></span>
<span class="logo_b" id="cart_button"><img width="55" height="55" src="style/images/cart.png" alt="Cart"></span>
</div>
<nav>
<span id="ttrgovina">Tshop</span>
<ul class="first_menu">
<li>
<a id="menu_1" href="javascript:void();">Komponente</a>
<ul class="second_menu"></ul>
</li>
</ul>
</nav>
</div>
NOTE: the code has been shortened. just li elements removed.
Would you please help me with this issue cause I am hanging on it for quite some time now. I tried also creating 2 menus, but I think this is a waste of time. If you need more data or anything else, just comment the post.
Related
Picture
if you click on this link you will see at left corner of the navigation bar i want to create an folat image like it
so i started to get some codes to preform it
so i found this
<html>
<head></head>
<body>
<div class="menu">
<li>
<img style="float: left;margin-left: -50%;" src="../images/logo.png" alt="Tera Host inc." height="60" width="200">
</li>
</div>
</body>
</html>
but its appearing at the top of the page i want something on the top left corner so an friend told me to do something
You have to make 2 divs following each other
And on each one you do style="float:left;"
And when yuu re done with the floating left
Make a big div that contain those divs
and on the ending do
so if anyone could help me pls reply the whole code
Thanks in advance
I am not very clear with your question! But i just gave a try in an assumption and I think you need to make the menu & logo float separately.
You can check this fiddle,
https://jsfiddle.net/8brvykvn/1/
<div class="header">
<a href="#" class="logo">
<img src="../images/logo.png" alt="Tera Host inc." height="60" width="200"></a>
<ul class="menu">
<li>Dashboard</li>
<li>Game Monitor</li>
<li>TS3 Admin</li>
</ul>
css:
.header a{
float: left;
margin-right:10px;
}
.header .menu{
float : left;
margin : 0;
padding: 0;
}
.header:after{
content:'';
display:block;
clear: both
}
.header .menu li{
list-style:none;
display:inline-block;
}
.header .menu li > a{
margin-right:10px;
}
Take a look at my code and tell why things don't work out please. The blue line should be on the bottom of the page. The body seems to be really small even though I used clear divs. If you find what went wrong please explain the solution. I'm new in coding so an explanation will be really useful to me. Thank you on advance.
#charset "utf-8";
/* CSS Document */
.clear {
clear:both;
}
.wrapper {
width:80%;
margin: 0 auto;
}
header {
margin-top:40px;
border-bottom:1px solid black;
padding-bottom:10px;
}
header img {
float:left;
width: 250px;
}
#socialmedia {
float:right;
padding:0;
margin-top:-2px;
}
#socialmedia li {
float:left;
list-style-type:none;
padding-left:10px;
}
li img {
width:40px;
}
#listmenu {
float:left;
margin-top:80px;
margin-right:5px;
}
#listmenu li {
display: block;
margin-bottom:40px;
font-family:Arial;
Font-size: 30px;
border-right:1px solid black;
}
#leftmenu li:first-child {
color:#3598db;
}
#right {
float:right;
width:60%;
}
#signupline {
background-color:#3598db;
height:50px;
width:auto;
}
button {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<header>
<div class="wrapper">
<img src="logo.png" alt="logo"/>
<ul id="socialmedia">
<li><img src="facebook.png" alt="facebook" /></li>
<li><img src="twitter.png" alt="twitter" /></li>
<li><img src="youtube.png" alt="youtube" /></li>
</ul>
<div class="clear"></div>
</div>
</header>
<div id="leftmenu">
<div class="wrapper">
<ul id="listmenu">
<li>Home</li>
<li>What's e-friendship</li>
<li>Lanching Day</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="clean"></div>
</div>
</div>
<div id="right">
<h1>Welcome to e-Freindship</h1>
<p>e-Friendship is the new unbelievable website where you can make new friends from all over thr world. Reading is a complex cognitive process of decoding symbols in order to construct or derive meaning (reading comprehension). Reading is a means of language acquisition, of communication, and of sharing information and ideas. Like all languages, it is a complex interaction between the text and the reader which is shaped by the reader’s prior knowledge, experiences, attitude, and language community which is culturally and socially situated. The reading process requires continuous practice, development, and refinement. In addition, reading requires creativity and critical analysis. Consumers of literature make ventures with each piece, innately deviating from literal words to create images that make sense to them in the unfamiliar places the texts describe. Because reading is such a complex process, it cannot be controlled or restricted to one or two interpretations. There are no concrete laws in reading, but rather allows readers an escape to produce their own products introspectively. This promotes deep exploration of texts during interpretation.[1] Readers use a variety of reading strategies to assist with decoding (to translate symbols into sounds or visual representations of speech) and comprehension. Readers may use context clues to identify the meaning of unknown words. Readers integrate the words they have read into their existing framework of knowledge or schema (schemata theory).</p>
<div class="clear"></div>
</div>
<div id="signupline">
<p id="signuptext">Take your place and sign up</p>
<button>Sign Up</button>
</div>
</body>
</html>
Try move the clear div out of the right div:
<div id="right">...</div>
<div class="clear"></div>
I am designing a website and I want the footer to have two small images on the bottom left side followed by #* (a twitter address). In the middle of the footer I want the address and on the right of the footer I want the contact number.
At present I have all of the above in the footer div however they are not all aligned. The images are very far apart and the text is in the wrong place. The text is below the images and to the right. However I want everything to be aligned horizontally.
I am using HTML and CSS on macromedia dreamweaver.
The current code is:
<div class="footer content">
<ul>
<li> <img src="Images/facebook.png" /> <img src="Images/twitter.png" /> </li>
<li>#TWITTERADRESS</li>
<li>POSTAL ADDRESS </li>
<li>TEL NUMBER</li>
</ul>
</div> <!--end of footer-->
CSS
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
First of all edit the CSS as
.footer ul li {
display: inline; // in a straight line
}
Edit the HTML part as:
<div class="footer">
<ul>
<li class="image"><img src="Images/facebook.png" />
<img src="Images/twitter.png" /></li>
<li class="twitter">#TWITTERADRESS</li>
<li class="address">POSTAL ADDRESS </li>
<li class="number">TEL NUMBER</li>
</ul>
</div>
Edit the CSS part now as:
.image {
float: left; // float to the left
}
.number {
float: right; // float to the right
}
Try it here: http://jsfiddle.net/afzaal_ahmad_zeeshan/6zYeA/
maybe something like this:
.footer {
text-align:centre;
background-color:#C8C8C8;
color:#000000;
padding-bottom:1em;
}
.footer li{
float: left;
width: 25%;
}
From the designer point of view... with Photoshop, Illustrator, Freehand or similar you can design a beautiful footer, or better a beautiful draft of the entire page first, the very one you would like to see. Then, start with the markup skeleton writing sections like this (html5):
<div id="wrapperdiv">
<header>
<nav>
<ul>
<li><a href='#'>home</li>
<li>...
<li><a href='#'>contact</li>
</ul>
</nav>
</header>
<section><blockquote>...</blockquote>...</section>
...
<footer>
<img src='.../footerLogo_left.png' id='footerLogo_left'>
<img src='.../footerMiddle_text.png' id='footerMiddle_text'>
<img src='.../footerLogo_right.png' id='footerLogo_right'>
</footer>
</div>
At this point we can write the CSS3 code (maybe at styles.css):
...
#wrapperdiv {background...}
header {width...}
nav li a{...}
...
footer{
width:...;
height:...;
margin:...;
}
Next thing to do is to cut images from the draft, like footer_bg.png, footerLogo_left.png, footerLogo_right.png, footerMiddle_text.png..., and link them to the markup:
footer{
background:url(.../footer_bg.png) repeat_x;
width:...;
height:...;
margin:...;
}
#footerLogo_left {
float:left;
margin:...}
#footerMiddle_text {
float:left;
margin: (the same than left)}
#footerLogo_right {
float:right;
margin: (the same than left)}
Ok, it's not as easy as it seems, but this way can give you very visual websites (graphical draft + html skeleton + css styles).
EDIT: I have solved my own problem. I have commented my code below where the error was. I will add an answer as soon as I'm able.
I have a header bar on my page which could have up to three rows of data:
Page Title
Page Information
Page Badges
However, the page-info bar and the page-badges bar are shown dynamically; sometimes they're there (depending on the data coming in), and sometimes they're not.
Goal: I want to ensure that everything stays nice and vertically centered in the header area, if one or more of the aforementioned rows is not present because there's nothing to render.
I attempted to use display:table-cell and vertical-align:middle, but it doesn't seem to be working out. Here's my code:
Relevant HTML:
<div class="header-bar">
<div class="header-bar-wrapper">
<h1 class="page-title">Charity Challenge Golf Outing</h1>
<div class="page-info">
<h5 class="item"><span class="info-label">Project</span>US Asset</h5>
<h5 class="item"><span class="info-label">Project Manager</span>John Smith</h5>
<h5 class="item"><span class="info-label">Start Date</span>11/22/2013</h5>
<h5 class="item"><span class="info-label">End Date</span>12/25/2013</h5>
</div>
<div class="page-badges">
<span class="page-badge">
<span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
<span class="page-badge-value">10</span>
<span class="page-badge-text">Cups Consumed</span>
</span>
<span class="page-badge">
<span class="page-badge-icon"><i class="fa fa-coffee"></i></span>
<span class="page-badge-value">3</span>
<span class="page-badge-text">Days Remaining</span>
</span>
</div>
</div>
</div>
Relevant CSS:
.header-bar {
display:table;
width:100%;
position:relative;
height:79px;
overflow:hidden;
border:1px solid black;
box-sizing:border-box;
padding:0 20px;
}
.header-bar-wrapper {
display:table-cell;
vertical-align:center; // THIS WAS MY ERROR. Should be vertical-align:middle
}
.page-title,
.page-info,
.page-badges {
display:block;
margin:0;
padding:0;
clear:both;
}
.page-title {
margin:0;
font-size:29px;
}
.page-info {
}
.page-badges {
bottom:0;
font-size:11px;
padding:5px 0;
}
Here is a Fiddle with the aforementioned code.
Turns out I was using vertical-align:center instead of vertical-align:middle. This fixed my code.
Here's an updated Fiddle with working code.
Try deleting either the page-badges or page-info block and you'll see how everything stays centered vertically.
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}