I am working on a menu where I want three of the buttons aligned to the left, two things aligned to the right and one other option aligned in the center. I am currently accomplishing this by adding padding to the center aligned one, but I feel as though there is a better way to do this. Especially when someone uses a screen of smaller resolution, such as a cell phone.
Here is what I have so far:
<html>
<head>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
}
</style>
</head>
<body>
<body bgcolor="#71AAE2">
<div align="center">
<table style="border-collapse: collapse;" border="0" width="1200" cellpadding="0" bgcolor="#6699FF">
<tr>
<td width="800">
<p align="center">
</td>
</tr>
<tr>
<td width="800">
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Contact Us </li>
<li style="float:right"><a href="http://www.gltdc.net/" target="_blank" ><img src="images/GLTDC.png" style="padding:7px 7px;" width="80" height="38"></li>
<li style="float:right;padding:18px 0px;display: block;color: white;text-align: center;text-decoration: none;">PROUD MEMBER OF THE</li></a>
<center><li style="display:inline-block;margin-left: 24%;">Employee Login</li></center>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
So what would be the best way to center that "Employee Login"?
Related
I want to display these 3 grey buttons on the banner. Everything i tried didn't work.
This is the html code:
<nav>
<img class="banner" src="img/Banner.png" alt="Banner">
<table>
<tr>
<td>
Index
</td>
<td class="separator">
<td>
<a class="active" href="seiteA.html">Seite A</a>
</td>
<td class="separator">
</td>
<td>
Seite B
</td>
</tr>
</table>
</nav>
I am new to HTML and CSS so i appreciate any help :)
Best practices:
It is not a good practice to use a <table> for navigation, you can use something like <ol>/<ul> as shown in nav documentation on MDN or even <div>s within display:flex container.
You can use the image as the background-image of the <nav> so that you don't have to position the navigation elements on top of it yourself.
nav {
position: relative;
height: 100px;
padding: 10px;
background-image: url("https://picsum.photos/100");
}
ol {
display: flex;
justify-content: space-around;
list-style: none;
}
li {
padding: 5px;
background: white;
}
<nav>
<ol>
<li>Seite A</li>
<li>Seite B</li>
<li>Seite B C</li>
</ol>
</nav>
Quick answer to help you move forward with what you currently have: You can make your nav a relative positioned container and absolute position your table on top of it anywhere you want.
nav {
position: relative;
}
img {
display: block;
height: 200px;
background-color: dodgerblue;
}
table {
position: absolute;
top: 50px;
left: 50%;
}
<nav>
<img class="banner" src="img/Banner.png" alt="Banner">
<table>
<tr>
<td>
Index
</td>
<td class="separator">
<td>
<a class="active" href="seiteA.html">Seite A</a>
</td>
<td class="separator">
</td>
<td>
Seite B
</td>
</tr>
</table>
</nav>
I'm hoping someone can help me with this. I have tried everything I know and read all the articles I could find. Nothing has worked
Basically, there is what seems to be a neon blue background color showing up ONLY on Gmail in the <td> containing the header image.
Screenshot (with image missing):
Screenshot (with image showing neon background):
Table code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="=FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
I have specified background colour white in the table and td. I have also added style attributes to the border to the href and img tags. None of these have worked.
The classes container and container1 both contain:
border-width:0 none;
background: #ffffff;
text-decoration: none;
text-decoration-color: #ffffff;
Even when I unlinked the header image and sent another test, the blue was there!
I think you added an equal rather than a hash in background color decoration for the td. You have bgcolor="=FFFFFF" instead of bgcolor="#FFFFFF". Below is the fixed code:
<table border="0" cellspacing="0" class="body-wrap" bgcolor="#FFFFFF" style="max-width: 600px">
<tbody>
<tr>
<td align="center" class="container" bgcolor="#FFFFFF" style="padding: 0px; margin: 0px; line-height:10px; font-size:6px">
<div class="container1">
<a href="http://www.rolla.com" style="text-decoration: none; border: none"><img src="https://rolla.igamingcloud.com/Images/Emails/MailSystem/Upload/rolla_system_header.gif" align=“absbottom” width="100%" style="display:block; max-height: 172px; max-width: 600px; border:none; padding: 0px; margin 0px" border="0" alt="Rolla Casino Logo"
/></a>
</div>
</td>
</tr>
</tbody>
</table>
Cheers
I am a newbie in HTML and currently working on my University project work and I really need some help. I am using a background box for the "blog-like" website which needs to align title and short text on the left and contents with hyperlinks on the right.
So far I have used a cell to align them but to say the least, it looks very ugly and moreover affects spacing. No matter what I tried I can't change the contents on both sides without a response from another. Is it possible to arrange content somehow another way instead of using a single cell for an entire box and dividing percentage for each side? I have uploaded a picture of the website below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Your Personal Guide To Best Hardcore Events
</title>
<style type="text/css">
body {
background: url(http://webprojects.eecs.qmul.ac.uk/at315/background.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed
}
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 0px;
background-color: #ffffff;
border: 1.5px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1300px;
}
</style>
</head>
<body>
<p align="center">
<img src="http://webprojects.eecs.qmul.ac.uk/at315/header.png" style="width:70%;" border="0" alt="" />
</p>
<div class="background">
<div class="transbox">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="75%" align="left">
<h2>
Articles:
</h2>
</th>
<th width="20%" align="center">
<ul style="list-style: none;">
<li>
Homepage
<br />
<br />
</li>
<li>
<small><a href="http://www.qmul.ac.uk" style=
"text-decoration:none">Architects</a></small>
</li>
<li>
<small><a href="https://www.facebook.com" style=
"text-decoration:none">Northlane</a></small>
</li>
<li>
<small><a href="http://www.bbc.co.uk" style=
"text-decoration:none">Attila</a></small>
</li>
</ul>
</th>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<br />
<br />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Main page of the website
In this situations it is best to use flex and max width. It is very good to responsive design so.
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1000px;
}
Change your browser size, It work good for all sizes. And the best part is if the screen has width < 1000px the table fills all of the screen.
just change this tag:
<table style="padding:0 5% " width = "90%" border="0" cellpadding="0" cellspacing="0">
I have been trying to fix the overlapping of the text in the the li when zooming in but i am unable to find a solution here is the link to JSFiddle.
if anyone is able to help me i will be gladly appreciated.
What I've updated:
moved hyperlinks inside listItems
removed float:right inside cells
added min-width to first cell of every column
removed width attribute to seconds cells
CSS
a {
text-decoration: none;
}
table {
display: inline-block;
line-height: 10px;
padding: 0px;
margin: 0px;
vertical-align: middle;
}
td {
height: 20px;
}
ul {
padding: 0px;
min-width: 700px;
margin: 0px;
overflow: hidden;
}
img {
vertical-align: middle;
margin-left: 5px;
}
#main_forums li:hover {
background: #EEE;
border: 1px solid #EEE;
border-radius: 4px;
}
#main_forums .main_forum_container li {
border: 1px solid #FFF;
clear: both;
border-radius: 4px;
display: block;
min-height: 50px;
height: 50px;
min-width: 900px;
padding-bottom: 10px;
}
#main_forums {
}
.sub_description {
min-width:300px;
}
#main_forums .main_forum {
background: #880000;
margin-top: 10px;
border: 1px solid #800;
border-radius: 4px;
}
.main_forum_header {
color: #FFF;
font-size: 20px;
font-weight: bold;
}
.main_forum_container {
background: #FFF;
color: #800;
border: 4px solid #800;
padding: 10px;
}
HTML
<div id="main_forums">
<div class="main_forum">
<div class="main_forum_header">
<img src="images/programming.png" height="70" width="70">
<span class="main_forum_title">Programming</span>
</div>
<div class="main_forum_container">
<ul>
<li>
<a href="?p=forums&forum_id=2&sub_id=1">
<img src="images/php.png" height="60" width="60">
<table border="1">
<tbody>
<tr>
<td class="sub_description" >
<span>PHP - Web Programming</span>
</td>
<td style="margin-right: 0px;">Posts: 12011</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >PHP web applications.</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
<li>
<a href="?p=forums&forum_id=2&sub_id=2">
<img src="images/python.png" height="60" width="60" />
<table>
<tbody>
<tr>
<td class="sub_description" >
<span>Python - Application Programming</span>
</td>
<td style="margin-right: 0px;">Posts: 12011</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >Python Application programming</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
</ul>
</div>
</div>
<div class="main_forum">
<div class="main_forum_header">
<img src="images/web_developing.png" height="70" width="70" />
<span class="main_forum_title">Web Developing</span>
</div>
<div class="main_forum_container">
<ul>
<li>
<a href="?p=forums&forum_id=1&sub_id=4">
<img src="images/css.png" height="60" width="60" />
<table>
<tbody>
<tr>
<td class="sub_description">
<span>CSS</span>
</td>
<td style="margin-right: 0px;">Posts: 12011
</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >Cascading Style Sheets</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
<li>
<a href="?p=forums&forum_id=1&sub_id=3">
<img src="images/html.png" height="60" width="60" />
<table>
<tbody>
<tr>
<td class="sub_description">
<span>HTML</span>
</td>
<td style="margin-right: 0px;">Posts: 12011</td>
</tr>
<tr>
<td class="sub_description" style="font-size: 12px;" >HyperText Markup Language</td>
<td>Views: 12012311</td>
</tr>
</tbody>
</table>
</a>
</li>
</ul>
</div>
</div>
</div>
Is there a reason for the tables? The first thing I would do is remove the tables. In fact none of your HTML is semantic. You have tables inside of li tags and li tags surrounded by hyperlinks.
<ul>
<li>
<a href="?p=forums&forum_id=2&sub_id=1">
<img src="images/php.png" height="60" width="60">
<span>PHP - Web Programming</span>
Posts: 12011
PHP web applications.
Views: 12012311
</a>
</li>
<li>
<a href="?p=forums&forum_id=2&sub_id=2">
<img src="images/python.png" height="60" width="60">
<span>Python - Application Programming</span>
Posts: 12011
Python Application programming
Views: 12012311
</a>
</li>
</ul>
http://jsfiddle.net/pLy92/
See how that already cleans things up? These are all in-line elements so they line up.
Remove the slash() in that <a href="?p=forums&forum_id=1&sub_id=4">\
I know this is similar to my other question but I made it too hard to understand so I have made this one
I have two tabs:
"Search" and "Tags"
"Search" is the default tab so I have a rounded edge box in the table behind the text BUT not as a background
I want this rounded edge box to be behind the 'Tags' tab when i put the mouse over 'Tags'
How do I do this?
HTML:
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0" >
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James
You can give your tab div an ID, and then when mouseover change its class to the same as Seach, and then back on mouse out.
You should try and put all your styling in the CSS, as you have center and font tags in the mix. Also, alot of new browsers offer rounded corner support for css3, maybe not a fix for you but just wanted to point that out.