The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with div tags
Seniorbfc
post Jan 16 2017, 05:39 PM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



Need help with this. I have a CSS sheet with different div tags. My website has a top banner with clickable buttons, I want to add an image to the end of the list (which I have already done) but with a different style (as the buttons change colour when hovered over). So basically I want the image in the same line as the buttons but without the style. Do I need to change the .html coding or the css style sheet? Here is my code for the .html.

CODE

<body>
    <div id="div1">
    <div id="div2">
    <div id="nav_wrapper">
        <head><h1>Joshua Senior</h1></head>
    <ul>
        <li><A HREF="Index.html" class="active">Home</A></li>
        <li><A HREF="About.html">About</A></li>
        <li><A HREF="Contact.html">Contact</A></li>
        <li><A HREF="Social.html">Social

            <ul>
            <li><A HREF="Facebook.html">Facebook</A></li>
            <li><A HREF="Linkedin.html">LinkedIn</A></li>
            <li><A HREF="Google.html">Google+</A></li>
            </ul>
<li><img src="linkedin.png" alt="Mountain View" style="width:34px;height:28px;"></li>

    </li>
    </ul>
</div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 16 2017, 06:02 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



And the CSS to go with that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Jan 17 2017, 12:59 PM
Post #3


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



Want an image to be on the same line as my headers but with a different style. I want the linkedin image to be after the Social header (which it already is) but also have a different <div> or style
CODE

        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
    <div id="div1">
    <div id="div2">
    <div id="nav_wrapper">
        <head><h1>Joshua Senior</h1></head>
    <ul>
        <li><A HREF="Index.html" class="active">Home</A></li>
        <li><A HREF="About.html">About</A></li>
        <li><A HREF="Contact.html">Contact</A></li>
        <li><A HREF="Social.html">Social</A>

            <ul>
            <li><A HREF="Facebook.html">Facebook</A></li>
            <li><A HREF="Linkedin.html">LinkedIn</A></li>
            <li><A HREF="Google.html">Google+</A></li>
            </ul>

<li><img src="linkedin.png" alt="Mountain View" style="width:34px;height:28px;"></li>

    </ul>
    </li>
    
</div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 17 2017, 01:13 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Looks like the same problem as you asked about in your other thread, so I merged the threads.

Obviously things aren't on the same line with only the HTML, so, as said, we need to see the CSS too.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Jan 17 2017, 03:01 PM
Post #5


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



Here's the CSS code laugh.gif
CODE

body{
    font-family: arial, sans-serif;
    text-align: center;
}
*{
    padding: 0px;
    margin: 0px:
}
#div1{
    width: 100%;
    height: 1000px;
    background-image: url("Nebula.jpg");
}
#div2{
    background: #FF8E00;
    height: 110px;
    width: 100%;
    line-height: 90px;
    opacity: 0.8;
    filter: alpha (opacity=80);
}
#div2 h1{
    float: left;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-left: 10px;
}
#div2 ul{
    float: right;
    position: relative;
    margin-right: 110px;
    line-height: 55px;
}
#div2 ul li{
    list-style-type: none;
    display: inline-block;
}
#div2 ul li a{
    padding: 22px;
    text-decoration: none;
    color: #ffffff;
    display: block;
}
#div2 ul li:hover{
    background: #FFDF00;
    transition: all 0.40s;
}
#div2 ul li:hover ul{
    display: block;
}
#div2 ul ul{
    display: none;
    width: 120px;
    position: absolute;
}
#div2 ul li li{
    background: #FFDF00;
    display: block;
}
#div2 ul li li a{
    padding:20px;
}
#div2 ul li li:hover{
    background: #FFC200;
    transition: all 0.40s;
}
#div2


.active{
    background: #FFDF00; /*same as #div2 ul li li*/
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 17 2017, 05:09 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Is the background on hover the only problem? You could give that last LI a class and set its background to transparent on hover.

CODE

#div2 ul li.foo:hover { background: transparent }


It's a little backwards, but less typing than classing the other LIs.

You've forgotten to close a LI, the one the nested UL is in.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Jan 18 2017, 01:06 PM
Post #7


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



Thanks a lot! The background was the main problem, but I did also want to move the image down a bit as its not in line with the text. Is this possible?


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 01:34 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You don't want it to stand on the line? You can change that with vertical-align. There's quite a few options.
https://www.w3.org/TR/CSS2/visudet.html#pro...-vertical-align

You have some more errors, both in the HTML and the CSS. For instance, you can't use HEAD inside BODY. You have it around your H1. Remove it from there.

You have a serious CSS error here.
CODE
*{
    padding: 0px;
    margin: 0px:
}


A colon instead of a semi colon at the end of the second line.

Use validators to find other errors.
If you don't use HTML5 you can use our HTML validator, I find its output clearer and easier to skim through.
http://htmlhelp.com/tools/validator/
For HTML5 you go here.
http://validator.w3.org/
And for CSS here.
http://jigsaw.w3.org/css-validator/


A small thing, put width and height for images in the HTML rather than in the CSS. The reason is that helps the browser when it draws the page so space is reserved for the images and the page loads nicer. It won't be noticeable for a small image on a page with mainly text like yours. But you've seen pages that sort of rearrange themselves as the images load in. That's avoided by using the width and height attributes, so it's good to get into the habit of doing that.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Seniorbfc
post Jan 18 2017, 01:52 PM
Post #9


Newbie
*

Group: Members
Posts: 17
Joined: 16-January 17
Member No.: 26,267



I've got it how I wanted it to look, thanks for the help biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 18 2017, 02:24 PM
Post #10


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Good! And you're welcome. happy.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 08:07 AM