I am designing a webpage and I am almost finished but there is a small issue that I can't seem to figure out.
HTML:
<html>
<head>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{display:inline-block;position:relative;height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative;}
.p5{font-size: 7pt; color: black; padding-left:465pt;}
</style>
</head>
<body>
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
</body>
</html>
When you run the code it shows the green bar with text in it. When you resize the web page width wise the green bar shrinks along with the webpage and stays the proper size. However, the text in the far right does not do that. Once you go so far over it goes out of view and starts wrapping. I need the text to move along with the green bar.
I am stuck on this part and can not seem to figure it out. Can you anyone please help me out on what I am not doing?
Thank you in advance
If you want the green bar to respond to the width of the browser window, I would set your width on .float-box-footer to something like 100%. A percentage value will adjust with the window.
The problem you're facing now is that the width of .float-box-footer is being defined by the children elements inside there. The padding value on .p5 is forcing the green box open. If you give .float-box-footer a fluid width value like 100% and throw a text-align: right; or float: right; onto .p5 you should be in business.
I'd suggest reading up on the fundamentals of the CSS box model: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Please do refer the code
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{height:37px;background-color:#accb32;max-width: 860px;width: auto\9;}
.p4{font-size: 12pt; color: black; padding-left:5pt; left:0; top:7pt; font-family:National, Arial, sans-serif;position:relative; width:50%;}
.p5{font-size: 7pt; color: black; width:50%; text-align:right; float: right;}
<div class='float-box-footer'>
<p class="p4">Learn more <a href="http://www.google.com" alt="" >Google.com</a>
</p>
<p class="p5">© 2016 Google Google of Google. All rights reserved.</p>
</div>
<style>
* {margin:0; padding:0; text-indent:0; }
.float-box-footer{
display:inline-block;
position:relative;
height:37px;
background-color:#accb32;
max-width: 860px;
width: auto\9;
white-space: nowrap;
}
.p4{
font-size: 12pt;
color: black;
padding-left:5pt;
left:0; top:7pt;
font-family:National, Arial, sans-serif;
position:relative;}
.p5{
font-size: 7pt;
color: black;
padding-left:465pt;
}
</style>
Add a whitespace property with a no wrap value to the floatboxfooter div.
Check the floatboxfooter properties in my example. Hope this helps.
Related
I'm having issues trying to create a "banner" above the navigation bar on my website using CSS/HTML.
I can't get a background color to display in the banner, and I also can't manage to get the header text to float to the right of the banner logo/icon. Here is my code so far for both HTML header and CSS.
HTML:
<header>
<link href="index.css" rel="stylesheet">
<div class="banner">
<img src="logo.png" class="profile-picture" alt="Header Logo">
<h1 class="title">Header info 1</h1>
<h2 class="title">Header info 2</h2>
<h3 class="title">Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
</header>
Here is the CSS:
.header img{
float: left;
}
.header .banner{
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.header .banner .title{
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
So a summary of the problems I'm having:
I can't get the logo to float to the left of the title headings (they appear underneath the logo)
I can't get the background color of the banner to change
I can't get the font style or font color to change
I know it's probably the way I'm referring to these elements in the CSS, but I can't figure out how to refer to them properly.
Thanks in advance for your help
I can't get the logo to float to the left of the title headings (they
appear underneath the logo)
You give 1 sibling inside .banner float and the other one is not floating. This will make them overlap. Give either none or both of them float.
I can't get the background color of the banner to change
Use the background-color css-property.
I can't get the font style or font color to change
Change the .header into header in your css. The first one is targeting the class header and the latter one targets the header html-tag.
Pro tip: try using an online code editor with HTML and CSS like Codepen to ask your questions. This will make it easier for people to try and answer your questions resulting in faster and more elaborate answers.
I have replaced the css class to inline css checkit out if it can help
<div style='background-color:red'>
<img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/pink-324175_1280.jpg" style="float:left; height: 80px; padding:5px;" alt="Header Logo">
<h1 class="title" style='font-size: 25px; color:#ffff00;'>Header info 1</h1>
<h2 class="title" style='font-size: 15px; color:#00ff00;'>Header info 2</h2>
<h3 class="title" style='font-size: 10px; color:#0000ff;'>Header info 3</h3>
</div>
<nav>
<! --this part works fine so code omitted -->
</nav>
Your specificity in your CSS is wrong. If you amend these to the code below you'll get the behaviour you're looking for.
.banner img{
float: left;
}
.banner {
display:inline-block;
*display:inline;
padding: 20px;
background-color: #5C5F58;
margin:10px;
}
.title {
display:inline-block;
*display:inline;
font-family: 'Bebas Neue', sans-serif;
color: #ffffff;
text-transform: uppercase;
}
I have tried Position:fixed/static/relative/absolute... still overlapping on the body & sometimes the footer(blocking other parts of the body).
Image:
/* Footer */
footer {
background: #444;
}
.h-sec {
font: 22px Arial, Helvetica;
}
.sec {
font: 9px, Arial, Helvetica;
}
#f-nav a {
color: #F4F4F4;
}
#f-nav .current {
color: #A9A9A9;
text-decoration: underline;
}
.a-void {
color: #000000;
}
<footer>
<section class="f-sec1">
<h5>CAD | Tech Website©</h5>
<br>
<div id="f-nav">
Home
Services
Contact
About us
</div>
</section>
<section>
Donate :)
</section>
</footer>
for the full code(Error in images): https://jsfiddle.net/s0nk37cg/ - IT WILL LOOK FINE BUT IT IS BECAUSE THERE IS NO IMAGE, PLEASE LOOK AT THE IMAGE OR MAKE YOU OWN IMAGE TO BE CLEAR AND UNDERSTANDABLE
Try this:
Step 1 - Add the below to your css:
.clearfix:after {content:""; display:table; clear:both;}
Step 2 - Changes in your html:
Change:
<section id="container" >
- to -
<section id="container" class="clearfix">
see if that help, you might have to tweek your margins and/or padding though
Simple fix for this problem is to give a margin-bottom value to your body element to avoid overlap at the end of the page or scroll. provide the value depending on the height of your footer.
I am having an issue with the submenu disappering for a website that I was asked to update and fix an issue (employee who created is no longer here). Admittedly I am not a UI person but trying to figure this out.
The menu options display and the submenu show when the user mouses over the parent menu item, however as soon as the mouse is moved to the submenu it then disappears. I upped the DisappearAfter tag to 9999. while the menu now displays I am not able to click on the menu item to navigate.
<div id="navigation-container" >
<div id="navigation" >
<asp:Menu ID="menuNavigation" StaticDisplayLevels="1" StaticSubMenuIndent="0" Orientation="Horizontal"
Font-Names="Arial, Gill Sans" runat="server" DynamicEnableDefaultPopOutImage="True"
StaticEnableDefaultPopOutImage="False" DisappearAfter="9999" DynamicHoverStyle-CssClass="navmenuitemhover"
StaticSelectedStyle-BackColor="Red">
<DynamicMenuStyle CssClass="headerzindex10" />
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="navlevel1" />
<asp:MenuItemStyle CssClass="navlevel2" />
<asp:MenuItemStyle CssClass="navlevel3" />
</LevelMenuItemStyles>
</asp:Menu>
</div>
<asp:Label ID="lblOverview" runat="server" Text="Overview" CssClass="overviewLink" />
</div>
CSS Code:
#navigation-container
{
width: 100%;
color: #000;
top:60px;
position:fixed;
left:0px;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B79BC, endColorstr=#355DAF);
BACKGROUND-COLOR: #4b79bc;
z-index:10;
}
#navigation
{
margin:0px;
position:fixed; /* This fixes the menu items issue*/
padding-left:5px;
z-index:10;
}
.navlevel1
{
color: white;
z-index:10;
top:35px;
padding:5px;
}
.navlevel2
{
color: black;
font-family: Gill Sans MT !important;
font-size: small;
background-color: #a5bcdd;
z-index:10;
top:35px;
}
.navlevel3
{
color: black;
background-color: #dbe4f1;
font-family: Gill Sans MT !important;
font-size: small;
z-index:10;
}
.navmenuitemhover
{
background-color:#253c5e;
color:White;
font-weight:bold;
z-index:10;
}
.headerzindex10
{
position:relative;
z-index:10;
}
Any help would be appreciated.
After many many searches, CSS edits, and re-doing the menu as a JQ Menu, i found that the line filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B79BC, endColorstr=#355DAF); was causing the issue. Our company uses IE8 as the standard and we are locked down from upgrades.
Researching after the issue was found indicated that using filters in the CSS causes lots of issues in functionality and placement of elements and it is best not to use them.
The 2 options to fix was to use a background image repeated across the <DIV> or to remove and just use a solid color. since the menu bar area so small enough we just used the endColorstr for the menu and it blended nicely with the gradient for the header.
This seems simple to me, but after days of trying (I have very limited experience) and searching for a solution, I have drawn a blank.
I am creating a page of links on a single html page with embedded css style for use in a browser window.
I wish to simply align my link to the left of my div, with a text explanation of the link which aligns to the right of the div. There is a wrapper div which contains two of these other div's (right and left), which contain boxes (categories) of links. The first example is merely using periods to create the desired space.
So far I have tried the below HTML:
<html>
<body>
<div class="wrapper">
<div class="div_body_side1">
<div id="div_category01">
<p>
<A HREF="http://www.webaddress" > Short Description
</A>.................... Longer description of where this link will take you
</p>
</div>
</div>
</div>
</body>
</html>
I also thought I may try this method (below) but I don't know how to color the text in the long description and align it to the far right of the category div.
<tr>
<td>
<A HREF="http://www.webaddress" > Short Description</A>
</td>
<td>
Longer description of where this link will take you
</td>
</tr>
Will I have to create two more side-by-side divs inside each category to achieve what I'd like?
I will also need the divs and text to 'shrink' (scale) horizontally for small laptop use and I know that a lot of div's (floating) somehow prevents proper scaling.
I apologise for my lack of expertise, but I really have been looking for a solution for days.
Thank-you in advance for any assistance.
.............
..................................................
Hello again.
Unfortunately, Billy Chan's answer did not work (but thank you for reminding me to use the 'title' attribute). I have tried it with a list of three links and what happens is the output looks like this:
link1link2link3 explanation1explanation2explanation3
Here is what I used:
<div>
<span class="link">
Whatever</span>
<span class="explanation">Whatever explain</span>
<span class="link">
Google search
</span>
<span class="explanation">Secure Google search page
</span>
<span class="link">
<a href="http://www.google.com/ncr" >Google search</A>
</span>
<span class="explanation">US Google search page
</span>
</div>
...with the following CSS:
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
I shall now try the other solutions that have been kindly provided.
Thank-you all so much.
.......................................
Thank-you dbaseman, but your solution requires two more divs within my category divs, does it not? I can't apply your "div class="right"" to my Category divs (which are an IDs), can I?
Will now try Urg mu's solution. Cheers.
Oh.. Urg mu - it seems you have provided a solution for colouring the text only. Your solution isn't going to align my 'long explanation' to the right is it?
On to Naveen Sharma. I'm sorry but can you please explain what your solution is actually supposed to do?
Thank you all again. I am learning a lot.
Cheers.
Please see this horrible jsFiddle version of what I am trying to achieve. Yes, it includes lots of testing things and also the 'solutions' provided here.., and you will have to drag your browser window to the far right and the 'result' window to the far left to see my two divs side-by-side:
http://jsfiddle.net/wreckanoid/CdN2z/
Direct answer:
Use two spans to wrap links and explanation. Example
<div id="catgory01">
<span class="link">Whatever</span>
<span class="explanation">Whatever explain</span>
</div>
Then define style of the two spans
<style>
.link, .explanation {display:inline}
.link {float: left}
.explanation {float: right}
</style>
The reason to wrap the link is you may not want all your links behave like this.
This answer should work, but you may find problem is your link anchor or explanation is too long, they may overlap. Just pay attention to that.
A further answer: The correct way to explain a link is to use title attribute
Whatever
This way when you hover the link, you get the hint.
In The HTML that you have given add folowing line of code
<style>
.div_body_side1 p a{width:200px;float:left}
</style>
LIVE DEMO
CSS
div { width:400px; border:red 1px solid; padding:10px 0px; }
p { overflow:auto; margin:0px;
background:url('http://reference.wolfram.com/legacy/MathematicaCharacters/Ellipsis.gif') 100% repeat-x ;
}
a {
float:left; padding:0px 5px 0px 10px;
background-color:#fff;
}
.desc {
float:right; padding:0px 10px 0px 5px;
background-color:#fff;
color:#333;
}
HTML
<div>
<p>
<a href="#link" >IAClient</A>
<span class="desc">QUT Internet Access Client</span>
</p>
<p>
<a href="#link" >AARNet</A>
<span class="desc">AARNet's FTP & HTTP Mirror</span>
</p>
</div>
http://jsfiddle.net/CZt8R/
One simple way is to use float: left and float: right on the link and the description, respectively.
HTML
<a href="http://www.webaddress" > Short Description </a>
<div class="right">.................... Longer description of where this link will take you</div>
CSS
a { float: left; }
.right { float: right; }
Here's a demo.
Edit post update
Two keys to getting this kind of layout:
Use fixed (percentage-based) left-margins for the links, and for the descriptions
Display a long string of ellipses "..............." and use overflow-x: hidden to hide the excess
Another demo.
Here is what I have settled on.
I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use.
Here is the result:
http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/
Here is the code:
http://jsfiddle.net/wreckanoid/zV9Sd/
.wrapper
{
position:relative;
background-color: #e7ecfa;
width: 90%;
margin-left:15%;
margin-right:15%;
height:auto;
display: block;
overflow:auto;
border:inset .5em #ccffff;
margin: 1em auto;
box-shadow: 0 0.3em 1em #000000;
}
.div_body_side1
{
float: LEFT;
position:relative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display: block;
margin-left: 2.5em;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
white-space:normal;
clear:none;
}
.div_body_side2
{
clear:none;
float:left;
position:reative;
text-align: left;
/* border: solid 1px #d1d7e5; */
width: 45%;
display:inline;
margin-right: 1em;
margin-top: 2em;
margin-bottom: 2em;
padding: .5em;
}
#div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09
{
background-color: #eff5fb;
margin: 1em 1em;
width: auto;
display: block;
border:ridge 6px #ff3333;
box-shadow: 0 0.3em 1em #000000;
position:relative;
clear:both;
}
.center
{
text-align: center;
}
.right
{
float: right;
padding-right: 20px;
color: #cc6600;
}
body
{
margin:0;
padding:0;
}
h1
{
text-align: center;
}
h2
{
text-align: center;
}
img.center
{
display: block;
margin: 0 auto;
}
a
{
color: blue;
padding-left: 20px;
}
Here is the HTML:
</head>
<body>
<div class="wrapper">
<H1> Test Bookmarks Menu</H1>
<a href="http://www.qut.edu.au" >
<IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif"
BORDER="4" title="QUT logo" alt="QUT logo" class="center" /></a>
<div class="div_body_side1">
<div id="div_category01">
<H2>CATEGORY 1 HEADER</H2>
<br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category01 -->
</div><!-- close div_body_side1 -->
<div class="div_body_side2">
<div id="div_category05">
<H2>Category 5 Header </H2>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
<a href="https://www.google.com/ncr" > Google USA
</a>
<span class="right">
Google Secure, USA
</span><br><br>
<a href="https://encrypted.google.com/" > Google Encrypted
</a>
<span class="right">
Google Secure, Encrypted
</span><br><br>
<a href="https://www.google.com.au/" > Google Australia
</a>
<span class="right">
Google Secure, Australia
</span><br><br>
</div><!-- close category05 -->
</div><!-- close div_body_side2 -->
Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)
I will be adding the 'title' tag to all the links, too.
Cheers.
I have a problem here i am getting space around this text i was not able to get rid off.
i cannot apply globally padding:0 or margin:0 to the all divs. My div is part of the page i want to remove extra space around my div alone i cannot apply padding:0 or margin:0 to body also.
<html>
<body>
<div class="topcont" id="topcont" style="display: block;padding:0px;margin:0px">
<div id="dragcont" style="display: block;padding:0px;margin:0px">
<div style="padding:0px;margin:0px; text-align: center; font-size: 18px; font-weight: bold; font-family: Helvetica Neue;">
Drop up to 5 photos here
</div>
<div style="padding:0px;margin:0px; font-size: 18px; font-family: Helvetica Neue; border: 0px none; height: 18px; text-align: center;">
Or
</div>
</div>
<div style="padding:0px;margin:0px;color:#333; text-align:center; font-size:14px;font-family:Helvetica Neue">
to add them as attachments
</div>
</div>
</body>
</html>
I dont know why i am getting space above the given texts.
You can easily set margins to 0 using the following on any element.
#myDiv{
margin:0px;
}
Note the 0px; and not 0;
For rendering/optimization purposes its good to include the unit of measurement (e.g. px,em,etc)
You need to set the margins to 0 for the elements that border it, depending on the rest of the layout possibly for the relevant directions only.
http://jsfiddle.net/sCj6y/1/ here you go but you should not style elements in the HTML file.