Geek Answers Handbook

CSS help on website

I am new to web coding and I need help with CSS. However the webpage did not work out as I planned

I tried to make a red section with links to them that appear in the very top left corner, below the image. The red background seems to spread throughout the page, not just the column. I would like to post photos, but I don't have a 10 reputation yet, so I can't :(

Here is the HTML code I used:

    <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd"
<html>
    <head>
        <title>Poll Analysis</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
</head>
    <body>
        <div class= "main">
            <div class = "row1">
                <img src="Leopard-Skin-Print-Wallpaper.jpeg" />
            </div>
        </div>
            <div class = "row2">
                <div class = "row2col1">
                    <u> Links </u>
                    </br>
                    <a href="http://google.co.uk/">Google</a>                   
                </div>
                <div class = "row2col2">
                </div>
            </div>
    </body>
</html>

And here is the CSS:

div.main{
width:50%;
margin:auto;
background:white;
}

div.row2col1{
float:left;
margin:0;
}

div.row2col2{
margin-left:25%
background-color:white;
border:15px solid #FF0000;
}

Thank you all for your help in advance:

Mark Turner

+4
source share
3 answers

@Anpsmn solved this for me. He said: "You are missing ;aftermargin-left:25%

.

, lol.

+2

, ?

HTML:

<body>
<div class="main">
    <div class="row1">
        <img src="Leopard-Skin-Print-Wallpaper.jpeg" />
    </div>
</div>
<div class="row2">
    <div class="row2col1"> <u> Links </u>

        </br> <a href="http://google.co.uk/">Google</a> 
    </div>
    <div class="row2col2"></div>
</div>

CSS

div.main {
    width:50%;
    margin:auto;
    background:white;
}
div.row2col1 {
    float:left;
    margin:0;
}
div.row2col2 {
    background-color: #fff;
    border:15px solid #FF0000;
}


* {
  margin: 0;
  padding: 0;
}
div.main {
    width:50%;
    margin:auto;
    background:white;
}
div.row2col1 {
    float:left;
    margin:0;
}
div.row2col2 {
    background-color:white;
    border:15px solid #FF0000;
}
<body>
    <div class="main">
        <div class="row1">
            <img src="Leopard-Skin-Print-Wallpaper.jpeg" />
        </div>
    </div>
    <div class="row2">
        <div class="row2col1"> <u> Links </u>

            </br> <a href="http://google.co.uk/">Google</a> 
        </div>
        <div class="row2col2"></div>
    </div>
</body>
+1

basically, every browser has default fields and padding size for each tag. so you need to clean it first. for this we use * opreater, it sets the values ​​for all tags, so here I reset the values ​​to 0.

*{
padding:0px;
margin:0px;
}

apply this css on the html page. the red line starts at 0 left corner. if you want the red bar to replace html with the first one first

+1
source

More articles:


All Articles